/* ═══════════════════════════════════════════════════════════════════════════
   AIMA · assets/ami-identidad-vestibulo.css — LA ENTRADA DE AMI IDENTIDAD
   ───────────────────────────────────────────────────────────────────────────
   Orden de Bratney, 06/09/2026: «una interfaz exacta para AMI Identidad, como
   la de AMI Locución, para darle al botón de Empezar».

   EXACTA QUIERE DECIR EXACTA, Y POR ESO NO HAY NI UNA MEDIDA INVENTADA. Todas
   están leídas de `ami-locucion.html`, línea por línea, y anotadas al lado con
   su origen. Es la misma decisión que se tomó al hacer el vestíbulo de Studio
   3D —está escrita en su `css/vestibulo.css`— y por el mismo motivo: son las
   puertas de la misma casa y tienen que reconocerse al abrirlas. Si alguna vez
   se cambia una medida allí, esta hoja se queda vieja a la vista y se ve.

   POR QUÉ ES UN FICHERO Y NO ESTÁ DENTRO DE LA PÁGINA. Porque la página la
   ESCRIBE `pruebas/monta-recortes.py` y lleva un cartel que dice que no se
   toca a mano. El generador arma su HTML con un `.format()`, así que cada
   llave de CSS que se metiera ahí dentro habría que escribirla doble —`{{`—
   y una hoja de 200 líneas con las llaves duplicadas es una hoja que nadie
   va a querer volver a tocar. Aquí las llaves son llaves.

   ───────────────────────────────────────────────────────────────────────────
   LO QUE NO SE HA COPIADO, Y POR QUÉ
   ───────────────────────────────────────────────────────────────────────────
   · LA MASCOTA. ⚫ 07/09/2026 · ESTO YA NO ES VERDAD Y SE DEJA ESCRITO PORQUE
     LA DECISIÓN SE DIO LA VUELTA. Decía que aquí no iba mascota —«el bloque de
     la marca aguanta sin ella»— y no aguantaba: puestas las tres pantallas en
     fila, esta era la única sin dibujo y se veía a un metro. AMI con chistera
     va incrustada en base64, la mete el generador desde
     `assets/files/mascota_identidad.png`, y son 10 KB, no 30.
   · LAS DOS PANTALLAS DE CUENTA. Locución tuvo crear y entrar, y se quitaron
     en agosto. Aquí nunca han existido: una sola pantalla y un solo botón.

   Y LO QUE SÍ, AL PÍXEL: el botón de 54 px con radio de píldora, el halo más
   ancho que el propio botón, el rótulo a .34em, el AMI a .88 de interlínea,
   el sub a .42em, la nebulosa de dos rojos sobre negro forja y el grano al
   3,5 %.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LA CAPA ──────────────────────────────────────────────────────────────
   `position:fixed` sobre la página, igual que en Locución (allí, línea 3195).
   La rejilla de recortes ya está montada debajo; esto no la sustituye, la
   TAPA — y al pulsar Empezar se aparta. Un vestíbulo que fuera otra página
   obligaría a una carga más justo cuando el usuario acaba de decidir entrar.

   z-index 200 es el de Locución, y aquí no compite con nada: la página
   generada no pasa de 10. */
#vestibulo{
  position:fixed; inset:0; z-index:200;
  overflow-y:auto; overscroll-behavior:contain;
  font-family:var(--fb); color:var(--hueso);
  -webkit-font-smoothing:antialiased;
  /* La nebulosa, entera y con sus mismos porcentajes. No es negro plano: el
     negro liso se lee como cartulina en cuanto la pantalla pasa de las diez
     pulgadas. */
  background:
    radial-gradient(68% 48% at 50% 104%, rgba(193,39,45,.10), rgba(193,39,45,0) 68%),
    radial-gradient(52% 40% at 4% -4%,  rgba(193,39,45,.06), rgba(193,39,45,0) 70%),
    var(--noche);
}

/* El grano al 3,5 %. No se ve; se nota. `pointer-events:none` porque si no se
   come los clics de la pantalla entera — el fallo que tuvo el velo de
   Locución en julio y que está escrito allí para que no se repita. */
#vestibulo::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Se va con una disolución corta y DESPUÉS se quita de en medio. Sin el
   `display:none` del final se queda encima, invisible, tragándose los clics de
   las cuatro puertas. Los 340 ms y los 360 del script son los de Locución. */
#vestibulo.yendose{opacity:0;transition:opacity .34s var(--e);pointer-events:none}
#vestibulo.fuera{display:none}

/* ── EL REPARTO ───────────────────────────────────────────────────────────
   Una columna en móvil y tablet de pie; dos a partir de 1080, que es donde lo
   parte Locución. */
#vestibulo .v-marco{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

/* ── EL LADO DE LA MARCA ─────────────────────────────────────────────────
   `overflow:hidden` porque el halo mide 150 % del ancho y sin recorte saca
   barra horizontal en móvil. */
#vestibulo .v-marca{
  position:relative; overflow:hidden; flex:none;
  padding:clamp(64px,9vh,88px) 26px clamp(20px,3vh,34px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  justify-content:center; gap:clamp(14px,2.4vh,22px);
}
/* El halo. Rojo al 12 %, que sobre negro forja es un rescoldo y no un foco.
   Es lo único que separa el fondo de un negro liso. */
#vestibulo .v-marca::before{
  content:''; position:absolute; left:50%; top:34%;
  width:min(760px,150%); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(193,39,45,.12),rgba(193,39,45,0) 62%);
  pointer-events:none;
}

#vestibulo .v-eyebrow{
  position:relative; font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  font-weight:700; color:var(--gris);
}

#vestibulo .v-logo{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px}
/* `--fd` es la Poppins de esta página; en Locución esto va con su `--ui`. Es
   la única diferencia tipográfica y no es un descuido: la página generada
   secuestra sus dos familias con @font-face y `local()` para no salir a la
   red, y usar aquí otra cosa la sacaría. */
#vestibulo .v-logo h1{
  margin:0; font-family:var(--fd);
  font-size:clamp(52px,9.5vh,84px); font-weight:900; letter-spacing:-.045em;
  line-height:.88;
}
#vestibulo .v-logo .v-sub{
  font-size:10.5px; letter-spacing:.42em; text-transform:uppercase;
  font-weight:700; color:var(--gris);
}

/* La promesa. Una frase y no un párrafo de funciones: la entrada no tiene que
   explicar el test, tiene que dejar entrar. Lo de las cuatro puertas ya está
   escrito al otro lado, que es donde hace falta. */
/* ── EL DIBUJO · 07/09/2026 ──────────────────────────────────────────────
   Lo que faltaba para que esto fuera hermana de las otras dos y no una
   pantalla de texto. Medidas copiadas de `.v-masco` de `ami-locucion.html`.
   `image-rendering:pixelated` NO es un capricho: AMI está dibujada píxel a
   píxel a 1024, y si el navegador la suaviza al bajarla a 130 se convierte en
   una mancha gris con brillos. Con esto, cada píxel sigue siendo un píxel. */
#vestibulo .v-masco{
  position:relative; width:clamp(112px,20vh,168px); height:auto; display:block;
  image-rendering:pixelated; image-rendering:crisp-edges;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.55));
  animation:v-flota 6s ease-in-out infinite;
}
/* Cuatro píxeles arriba y abajo, seis segundos. Lo justo para que la pantalla
   respire y no lo bastante para que nadie lo mire. */
@keyframes v-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){#vestibulo .v-masco{animation:none}}

/* ── LA PROMESA ──────────────────────────────────────────────────────────
   Va en la ESCRITA de la casa y no en la Poppins de la interfaz: es la única
   frase de la pantalla que la dice una persona, y en las otras dos apps ya
   está así. `AIMA Escrita` se sirve de la local —Snell Roundhand—; donde no
   esté, cae en Georgia y sigue siendo una itálica, no un palo seco. */
@font-face{
  font-family:'AIMA Escrita';
  src:local('Snell Roundhand'),local('SnellRoundhand');
  font-style:italic; font-weight:400; font-display:swap;
}
@font-face{
  font-family:'AIMA Escrita';
  src:local('Snell Roundhand Bold'),local('SnellRoundhand-Bold');
  font-style:italic; font-weight:700; font-display:swap;
}
#vestibulo .v-promesa{
  position:relative; margin:0; max-width:19ch;
  font-family:'AIMA Escrita',Georgia,'Times New Roman',serif;
  font-style:italic; font-weight:700; letter-spacing:0;
  font-size:clamp(27px,4vh,37px); line-height:1.3;
  color:var(--hueso);
}
#vestibulo .v-promesa em{font-style:inherit;color:var(--rojo-2,#FE3142)}

/* ── EL LADO DE LA FAENA ─────────────────────────────────────────────────
   `env(safe-area-inset-bottom)` para que en un iPhone el botón no quede
   debajo de la barra de gestos. */
#vestibulo .v-faena{
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 22px calc(22px + env(safe-area-inset-bottom)); gap:11px;
}
#vestibulo .v-faena>*{max-width:400px;width:100%;margin-inline:auto}

/* ── EL BOTÓN ────────────────────────────────────────────────────────────
   54 px, píldora, 15.5/700. Las mismas cifras de Locución línea 3593. */
#vestibulo .v-bt{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:54px; border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  text-decoration:none;
  transition:transform .18s var(--e), background .25s var(--e),
             box-shadow .25s var(--e), opacity .25s var(--e);
}
#vestibulo .v-bt:active{transform:scale(.975)}

/* EL GOLPE. Lo que hace que el botón se vea ENCENDIDO y no sólo pintado es
   que el halo es MÁS ANCHO QUE EL BOTÓN y no una sombra debajo: 34 px de
   difuminado sin desplazamiento vertical. Una sombra cae; un halo irradia.
   Es el único relleno de color de la pantalla, así que el rojo se queda muy
   por debajo de su techo del 10 %. */
#vestibulo .v-bt.v-golpe{
  background:var(--rojo); color:#F2F2F0;
  box-shadow:0 0 34px rgba(193,39,45,.42), 0 6px 20px rgba(0,0,0,.35);
}
#vestibulo .v-bt.v-golpe:hover{
  background:var(--rojo-2,#FE3142);
  box-shadow:0 0 46px rgba(193,39,45,.55), 0 6px 20px rgba(0,0,0,.35);
}
#vestibulo .v-bt:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}

/* ⚫ 07/09/2026 · aquí vivía `.v-pie`, la frase de debajo del botón. Se retiró
   con ella —orden de Bratney— y la regla se va detrás: una clase sin marcado
   es de las que sobreviven años y luego alguien la reutiliza creyendo que
   significa algo. En Locución tampoco hay nada bajo el botón. */

/* ── LA FLECHA DE VOLVER ─────────────────────────────────────────────────
   Hija de la capa a posta: siendo hijo se apaga solo con `.yendose` y
   `.fuera`, y no hace falta una regla de hermano. Es la misma solución que
   `#vVolver` en Locución, y está escrita allí. */
/* ⚫ 07/09/2026 · LA FLECHA ES LA DE LOCUCIÓN, declaración por declaración.
   Aquí llevaba círculo, borde y color gris: al lado de la de Locución —un
   galón desnudo en hueso— parecían dos aplicaciones de dos casas distintas.
   Se queda 44×44 aunque el dibujo mida 22: por debajo de 44 no se acierta con
   el pulgar, y eso no se negocia con la estética. */
#vestibulo .v-volver{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); left:14px; z-index:10;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; color:var(--hueso); text-decoration:none;
  transition:transform .2s var(--e);
}
#vestibulo .v-volver:active{transform:scale(.88)}
#vestibulo .v-volver svg{
  width:22px;height:22px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}

/* ── DE PIE, EN UNA COLUMNA ──────────────────────────────────────────────
   La marca se centra y la faena mide lo que miden sus botones. Con la marca
   pegada al techo, AMI salía arriba y quedaba un descampado negro debajo. */
@media (max-width:1079px){
  #vestibulo .v-marca{flex:1;justify-content:center}
  #vestibulo .v-faena{flex:none;padding-bottom:calc(34px + env(safe-area-inset-bottom))}
}

/* ── DOS COLUMNAS A PARTIR DE 1080 ───────────────────────────────────────
   La raya va como BORDE DERECHO DE LA MARCA y no como borde izquierdo de la
   faena: así pertenece al bloque que la proyecta, y el día que la faena
   cambie de sitio no se lleva una raya que no era suya. Es como está en
   Locución y como se copió a Studio 3D. */
@media (min-width:1080px){
  #vestibulo .v-marco{flex-direction:row;align-items:stretch;max-width:none}
  #vestibulo .v-masco{width:clamp(150px,17vw,210px)}
  /* ⚫ 07/09/2026 · LA RAYA, CLAVADA DONDE LA DE LOCUCIÓN. Las dos columnas
     van a `flex:1`, que en teoría parte la ventana por la mitad, pero un
     elemento flexible NO baja de lo que mide su contenido y el reparto acaba
     decidiéndolo lo que hay dentro: allí la raya cae en 769 y aquí caía en
     668, o sea 100 px a la izquierda y bien visible con las dos pestañas al
     lado. Los números son los de Locución MEDIDOS a 1440 —769 y 672—, puestos
     Y no es un porcentaje, es MEDIO ANCHO MÁS 49 px. Se midió la de Locución
     a tres anchuras —1280, 1440 y 1920— y da 689, 769 y 1009: siempre la
     mitad de la ventana y 49 px. Con `flex:1` salía 668 y con pesos de
     `flex-grow` 706, porque en los dos casos el reparto lo acababa decidiendo
     el contenido; escrito así, la raya cae en el mismo píxel que allí a
     cualquier anchura. */
  #vestibulo .v-marca{
    flex:0 0 calc(50% + 49px); max-width:none; padding:48px; justify-content:center;
    border-right:1px solid rgba(242,242,240,.08);
  }
  /* ⚫ 07/09/2026 · ESTAS DOS LÍNEAS SON LAS QUE MUEVEN LA RAYA. La marca y la
     faena van las dos a `flex:1`, pero un elemento flexible NO baja de lo que
     mide su contenido, así que el reparto lo decide la letra: con el AMI a 84
     y la promesa a 36 esta columna pedía menos que la de Locución y la raya se
     iba 100 px a la izquierda. Al ponerles su tamaño de verdad —7vw y 3.1vw,
     los de allí— las tres pantallas parten la ventana por el mismo sitio.
     Medido a 1440: 769 y 672, igual que Locución y que Studio 3D. */
  #vestibulo .v-logo h1{font-size:clamp(72px,7vw,104px)}
  #vestibulo .v-promesa{font-size:clamp(33px,3.1vw,46px);max-width:17ch}
  #vestibulo .v-faena{
    flex:1 1 auto; max-width:none; justify-content:center;
    padding:48px clamp(48px,7vw,110px);
  }
  #vestibulo .v-faena>*{max-width:400px;width:100%;margin-inline:auto}
}

@media (prefers-reduced-motion:reduce){
  #vestibulo, #vestibulo *{transition:none !important}
}