/* preceptoros.org · LA CARA, y solo la cara. Capa 4. Sale de `chat.css` porque aquello llego a 10.285 B de un tope de 10.240 al entrar los tres estados, y en este arbol se parte antes que recortar: los comentarios de estos ficheros son su razonamiento. La costura es por asunto, como la de `chat-router.js`: aqui esta la cara y su aritmetica; alli, la caja donde se escribe. */ /* --- Capa 4 · la esfera --------------------------------------------------- LA MISMA CARA QUE LA APP, con sus mismas cifras y sus mismos estados. No se elige nada aqui: el MVP lo resolvio el 2026-09-04 y esto lo espeja. El primer intento uso `cara-logo-256.webp` --la cara del icono de los accesos directos-- y estaba mal: es otra obra, y dos caras distintas para el mismo producto es lo que el trasplante de estilo vino a terminar. Tres tiras, y la aritmetica NO se toca. Las paradas estan calculadas contra su `background-size`; mover uno sin recalcular el otro ensena dos medios cuadros a la vez. reposo · 256x256, una cara quieta · 122,5 % pensando · 1280x256, cinco laminas · 612,5 % habla · 1024x256, cuatro bocas · 490 % EL 27,78 % NO ES UN CENTRO MAL PUESTO. Firmado en la app el 2026-09-04 tras verlo en el Doogee: el busto viene DIBUJADO a la izquierda de su cuadro, y al 50 % los ojos quedan descentrados respecto del aro. A 1,225x sobra un 9,2 % por lado y se usa un 4,1 %, asi que no se asoma nada de fuera. Los tres estados llevan el mismo desplazamiento o la cara saltaria al pensar. Y EL 490 % DE `habla` SE DECLARA, no se hereda. Es una cicatriz de agosto y no es estetica: heredar el tamano de otra tira recorreria cuatro bocas en siete huecos, y media vuelta quedaria fuera del marco con un parpadeo de alto contraste a ritmo constante -- un riesgo para personas con epilepsia fotosensible. Ninguna animacion de esta cara puede apagarla; solo cambiarla. PENSAR Y HABLAR SON DOS COSAS. Antes eran una: la boca se movia mientras el modelo generaba, o sea que la cara hablaba sin haber dicho nada. Piensa mientras piensa --cinco laminas del ojo-- y mueve la boca cuando el texto llega. La web ya tenia los eventos; le faltaba la cara. 155 px es la medida de la app (`--cara-centro`), no una elegida aqui. */ :root{--esfera:220px;--anim-habla-esfera:.864s;--anim-pensar:1.6s} /* ARRIBA A LA DERECHA, Y A CABALLO ENTRE LAS DOS CAJAS. La esfera cuelga de `
` --lo unico que contiene al cabezal y al chat a la vez-- y se sienta sobre la juntura: nace dentro del cabezal y termina dentro del chat. Por eso no puede vivir en ninguno de los dos, y por eso `
` estrena `position:relative`. Es la Capa 4 y no la tapa nadie salvo la pantalla completa, que es la 5. El `margin-top` negativo es lo que la sube a la juntura; el resto de la pagina no se entera porque va absoluta y no ocupa sitio en el flujo. 220 px, en tres pasos y mirandola cada vez, que es como se ajusta una cara: 320 ganaba la pantalla entera, 256 seguia rozando el chat, 220 lo deja libre. Sigue siendo mas del doble de los 155 con los que empezo. */ /* `main` ya no necesita ser el ancla: la esfera cuelga del CABEZAL. */ /* CUELGA DEL CABEZAL, Y SE ANCLA POR ABAJO. Antes flotaba en `main` con un `top` fijo, y eso obligaba a adivinar cuanto mide el cabezal -- que cambia con el idioma, con la sesion y con el ancho. Anclada al cabezal por su borde inferior, «hasta el borde del panel» deja de ser una estimacion y pasa a ser `bottom: 0`, sea cual sea la altura que tenga arriba. CADA ANCHO SE ANCLA POR UN LADO DISTINTO, y no es incoherencia. En escritorio la esfera mide 220 px y el cabezal ronda los 110: anclarla por abajo la empujaba fuera POR ARRIBA, y se vio en el navegador. Alli se ancla por su `top` y asoma hacia el chat, que es lo que la hace Capa 4. En el telefono la esfera es mas pequena que el cabezal, asi que `bottom: 0` la deja justo en el canto sin depender de lo que mida arriba -- que es lo que se pidio y lo que un `top` fijo no podia garantizar. `pointer-events:none` para que no se trague un clic de lo que hay debajo. */ .presentacion{position:absolute;right:.35rem;top:.9rem; z-index:var(--capa-4-cara);pointer-events:none} .esfera{width:var(--esfera);height:var(--esfera);border-radius:50%; background:var(--disco-cara) url("/assets/caras/cara-reposo-violeta-256.webp") 27.78% 50%/122.5% auto no-repeat; border:2px solid var(--bronce); position:relative;z-index:var(--capa-4-cara); animation:respirar 3.6s ease-in-out infinite} /* Quieta, y solo respira. Se mueve la Sombra, no la imagen: es lo que impide que una cara fija se lea como una aplicacion colgada. */ @keyframes respirar{ 0%,100%{box-shadow:0 8px 28px rgba(109,90,224,.22)} 50% {box-shadow:0 8px 30px rgba(224,184,114,.30)}} .esfera.piensa{background-image:url("/assets/caras/cara-secuencia-pensando-256.webp"); background-size:612.5% auto; animation:pensar var(--anim-pensar) steps(5,jump-none) infinite, latir 2.88s ease-in-out infinite} @keyframes pensar{from{background-position:1.219% 50%}to{background-position:96.829% 50%}} .esfera.habla{background-image:url("/assets/caras/cara-secuencia-habla-256.webp"); background-size:490% auto; animation:hablar var(--anim-habla-esfera) steps(4,jump-none) infinite, latir 2.88s ease-in-out infinite} @keyframes hablar{from{background-position:1.603% 50%}to{background-position:95.833% 50%}} /* Un gesto suelto: se asoma una boca y vuelve. Sale de la tira de habla, que es la unica que tiene bocas distintas, parada en su cuarto cuadro. Mismos numeros que la app. */ .esfera.gesto{background-image:url("/assets/caras/cara-secuencia-habla-256.webp"); background-size:490% auto;background-position:64.423% 50%} @keyframes latir{ 0%,100%{box-shadow:0 8px 28px rgba(109,90,224,.22)} 50% {box-shadow:0 8px 34px rgba(224,184,114,.45)}} /* Quien pidio menos movimiento se queda con la cara quieta y encendida. */ @media (prefers-reduced-motion:reduce){ .esfera,.esfera.piensa,.esfera.habla,.esfera.gesto{animation:none; background-image:url("/assets/caras/cara-reposo-violeta-256.webp"); background-size:122.5% auto;background-position:27.78% 50%}} /* --- Capa 1 · los atajos, debajo del campo ------------------------------ Se rellenan desde el javascript con lo que sirva al motor que este en uso: escritos aqui a mano prometerian acciones que otro modelo no tiene. Fila que se desplaza en horizontal y no se envuelve: envolviendose crecia en alto, y el alto es justo lo que el chat no tiene cuando sale el teclado. */ /* En pantallas estrechas la esfera se encoge en vez de comerse el cabezal. Es la misma regla que la app aplica con `--cara-centro-ancha`: la cara manda, pero no por encima de poder escribir. 136 px se quedan: es la medida que el Soberano dio por buena mirandola en el Doogee. Lo que baja es el `top` --de 2,2 a 3,2rem-- para que la cara arranque por debajo de la fila de la marca en vez de a su altura. El nombre no se parte y la cara no pierde tamano: se mueve, que era lo que sobraba. */ @media (max-width:1023px){ :root{--esfera:136px} /* Justo en el canto del cabezal, sin asomar. */ .presentacion{bottom:0} } /* --- el telon · el despertar ---------------------------------------------- LAS MISMAS CIFRAS QUE LA APP, que es donde se firmaron: la tira recorrida en 1,2 s con `steps(7, jump-none)` --siete fotogramas, no ocho-- y la cortina cayendo a los 1,8 s en 0,45 s. Ese respiro de seis decimas entre que la cara termina de despertar y la cortina se va esta firmado; alargar la tira obligaria a mover las dos, o ninguna. El encuadre tambien viene de alli: `0.746% 50% / 770%`. La ventana va en c = 0,536 porque el criterio no es el ojo sino la boca en el centro del circulo, medida por bandas horizontales sobre la extension del marmol --no por centro de masa, que lo desplaza el lado agrietado, que brilla y pesa mas--. En Y va anclada al medio y la figura entra entera, pelo incluido. `visibility:hidden` al final y no solo `opacity:0`: una cortina transparente que sigue ahi se come los clics de todo lo que hay debajo. */ .telon{position:fixed;inset:0;z-index:var(--capa-telon); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:1.3rem;background:var(--marmol-claro); animation:caer .45s ease-out 1.8s both} .telon-busto{width:min(58vw,300px);aspect-ratio:1;border-radius:50%; background:var(--disco-cara) url("/assets/caras/cara-secuencia-apertura-256-telon.webp") 0.746% 50%/770% auto no-repeat; border:3px solid var(--violeta); box-shadow:0 10px 34px rgba(109,90,224,.4); animation:despertar 1.2s steps(7,jump-none) 1 both} @keyframes despertar{ from{background-position:0.746% 50%} to {background-position:99.254% 50%}} @keyframes caer{to{opacity:0;visibility:hidden}} .telon-marca{margin:0;font-size:clamp(1.4rem,7vw,2.4rem);font-weight:800; letter-spacing:.02em;color:var(--tinta)} .telon-marca b{color:var(--violeta-texto);font-size:1.28em} /* QUIEN PIDIO QUIETUD NO ESPERA UN SEGUNDO Y MEDIO A UNA CORTINA. No se le quita la animacion dejandola quieta en pantalla: se le quita la cortina. */ @media (prefers-reduced-motion:reduce){ .telon{display:none} }