/* PIEZA 4 DEL ACABADO PREMIUM — QUE TODO LO TOCABLE RESPONDA. --------------------------------------------------------------------------- Una sola hoja para las OCHO páginas de la casa (la portada y los siete juguetes). Cada juguete la enlaza con un symlink (`css/tacto.css → ../../zaxfun/comun/css/tacto.css`) y `publicar.sh` materializa el enlace al desplegar, igual que `nav.css` y `anim.js`. Se carga SIEMPRE la última: el gesto es de la casa y gana al de la hoja del juguete, que se queda solo con su color y su forma. QUÉ RESUELVE. Hasta ahora cada juguete se había inventado su micro-respuesta: en las pruebas el botón subía 1 px y el plano no hacía nada; en «el hoyo» subía 2 con brillo; en «¿cuánto falta?» subía 2 con sombra. Ocho páginas, cinco gestos distintos y ninguno con aro. LAS REGLAS QUE NO SE TOCAN 1. Solo se animan `transform`, `box-shadow` y `filter`. Nunca `width`, `height`, `top` ni `left`: eso relayoutea y se ve a tirones. 2. TODO `:hover` vive dentro de `@media (hover: hover)`. En un teléfono el navegador dispara el hover al tocar y LO DEJA PUESTO: sin esto, el botón que tocaste se queda encendido hasta que toques otro (Pieza 5 del brief). Lo que el móvil sí tiene es el `:active`, y ese va fuera. 3. Se hunde rápido y se levanta despacio. Un botón que tarda lo mismo en bajar que en subir se siente de goma: el peso está en la asimetría (.07 s al pulsar contra .18 s al soltar), no en el tamaño del salto. 4. El aro va con DOS SOMBRAS —un filo de 1 px y un halo de color debajo— y no con un `::after` como en las tarjetas de la portada: aquí los pseudos ya están cogidos (`.siguiente::after` es la flecha, `.nav-esquina::before` la suya) y una sombra además no mueve ni un píxel de la maquetación. LOS TRES GRADOS. ``, por defecto «suave» —el grado que eligió Zax para las entradas de la Pieza 3—. `data-tacto="0"` lo apaga entero: es el lado «como está hoy» del taller. Todo el apagado y toda la cámara lenta se hacen moviendo las VARIABLES de aquí abajo, no repitiendo la lista de selectores: subir 0 px, encoger a 1 y pintar el aro con opacidad 0 es exactamente no hacer nada. El taller (`herramientas/prueba-tacto.html`) las pone desde fuera sobre el documento del iframe: en producción esto NO necesita ni una línea de JS. LAS CLASES `.zx-hover` y `.zx-activo` pintan lo mismo que `:hover` y `:active`. Existen para poder VER y VERIFICAR el gesto sin un ratón encima: el taller las enciende para enseñarlo en cámara lenta y la sonda de Playwright las usa para medir el desplazamiento de verdad. QUÉ NO ENTRA AQUÍ, a propósito: los mandos de juego que se aporrean —`.marcha-btn` y `.zoom-btn` de «el hoyo», `.paso-vel` y `.lejos-btn` de «¿cuánto falta?»— y la `.zona` del test de reflejos. Los primeros ya tienen su respuesta corta, ajustada al uso continuo; la segunda es la superficie que se cronometra y nada suyo puede llevar transición (LEEME de `Projects/Pruebas/`). Un juguete nuevo entra apuntándose en la lista, o poniéndole la clase `.zx-tacto` y ya está dentro. */ :root { --tacto-curva: cubic-bezier(.2, .8, .2, 1); --tacto-lento: 1; /* la cámara lenta del taller multiplica aquí */ --tacto-sube: -2px; /* cuánto se levanta al pasar por encima */ --tacto-hunde: .98; /* cuánto se encoge al pulsar */ --tacto-brillo: 1.04; --tacto-dur: .18s; /* soltar: despacio */ --tacto-dur-pulsa: .07s; /* pulsar: seco */ --tacto-aro: .34; /* opacidad del filo */ --tacto-halo: .55; /* opacidad del halo de debajo */ /* El color del aro. Cian es el de la casa; abajo hay bloques que lo cambian a oro (el botón principal) y a violeta («aquí empieza otra cosa»). */ --tacto-color: 111, 211, 255; } html[data-tacto="medio"] { --tacto-sube: -3px; --tacto-hunde: .965; --tacto-brillo: 1.07; --tacto-dur: .2s; --tacto-aro: .45; --tacto-halo: .7; } html[data-tacto="marcado"] { --tacto-sube: -5px; --tacto-hunde: .945; --tacto-brillo: 1.1; --tacto-dur: .24s; --tacto-aro: .6; --tacto-halo: .9; } /* Apagado. No hay que repetir ni un selector: sin salto, sin encogerse, sin brillo y con el aro a opacidad cero no queda gesto ninguno. */ html[data-tacto="0"] { --tacto-sube: 0px; --tacto-hunde: 1; --tacto-brillo: 1; --tacto-aro: 0; --tacto-halo: 0; } /* Freno 1 del brief: quien pide menos movimiento no ve NINGUNO. Mismo truco. */ @media (prefers-reduced-motion: reduce) { :root { --tacto-sube: 0px; --tacto-hunde: 1; --tacto-brillo: 1; --tacto-aro: 0; --tacto-halo: 0; --tacto-dur: .01s; --tacto-dur-pulsa: .01s; } } /* --------------------------------------------------------------------------- El gesto --------------------------------------------------------------------------- */ :is( .zx-tacto, .boton, .boton-plano, .boton-grande, .boton-fantasma, .siguiente, .pista-abajo, .info-otros a, .zx-marca, .zx-anuncio, .zx-parecido, .idioma, .sonido, .atras, .nav-esquina, .empezar, .compartir-viaje, .encuentro-seguir, .instalar-app-boton, .apoyo-boton, .reto-boton, .reto-suelto, .top-firmar, .dif ), #atras, #sonido { transition: transform calc(var(--tacto-dur) * var(--tacto-lento)) var(--tacto-curva), box-shadow calc(var(--tacto-dur) * var(--tacto-lento)) var(--tacto-curva), filter calc(var(--tacto-dur) * var(--tacto-lento)) var(--tacto-curva), border-color .2s ease, background .2s ease, color .2s ease; } /* El pulsado va FUERA de la media query: es lo único de todo esto que existe en un teléfono, y es justo lo que hace que un botón se sienta botón. */ :is( .zx-tacto, .boton, .boton-plano, .boton-grande, .boton-fantasma, .siguiente, .pista-abajo, .info-otros a, .zx-marca, .zx-anuncio, .zx-parecido, .idioma, .sonido, .atras, .nav-esquina, .empezar, .compartir-viaje, .encuentro-seguir, .instalar-app-boton, .apoyo-boton, .reto-boton, .reto-suelto, .top-firmar, .dif ):active:not(:disabled), #atras:active:not(:disabled), #sonido:active:not(:disabled), :is( .zx-tacto, .boton, .boton-plano, .boton-grande, .boton-fantasma, .siguiente, .pista-abajo, .info-otros a, .zx-marca, .zx-anuncio, .zx-parecido, .idioma, .sonido, .atras, .nav-esquina, .empezar, .compartir-viaje, .encuentro-seguir, .instalar-app-boton, .apoyo-boton, .reto-boton, .reto-suelto, .top-firmar, .dif ).zx-activo, #atras.zx-activo, #sonido.zx-activo { transform: scale(var(--tacto-hunde)); transition-duration: calc(var(--tacto-dur-pulsa) * var(--tacto-lento)); } @media (hover: hover) { :is( .zx-tacto, .boton, .boton-plano, .boton-grande, .boton-fantasma, .siguiente, .pista-abajo, .info-otros a, .zx-marca, .zx-anuncio, .zx-parecido, .idioma, .sonido, .atras, .nav-esquina, .empezar, .compartir-viaje, .encuentro-seguir, .instalar-app-boton, .apoyo-boton, .reto-boton, .reto-suelto, .top-firmar, .dif ):hover:not(:disabled), #atras:hover:not(:disabled), #sonido:hover:not(:disabled), :is( .zx-tacto, .boton, .boton-plano, .boton-grande, .boton-fantasma, .siguiente, .pista-abajo, .info-otros a, .zx-marca, .zx-anuncio, .zx-parecido, .idioma, .sonido, .atras, .nav-esquina, .empezar, .compartir-viaje, .encuentro-seguir, .instalar-app-boton, .apoyo-boton, .reto-boton, .reto-suelto, .top-firmar, .dif ).zx-hover, #atras.zx-hover, #sonido.zx-hover { transform: translateY(var(--tacto-sube)); box-shadow: 0 0 0 1px rgba(var(--tacto-color), var(--tacto-aro)), 0 10px 26px -14px rgba(var(--tacto-color), var(--tacto-halo)); } /* Los que ya eran una flecha se van de lado, no hacia arriba: en «atrás» y en «volver» el gesto ya significaba algo y sería una pena cambiarlo por un salto genérico. */ :is(.atras, .nav-esquina):is(:hover, .zx-hover), #atras:hover, #atras.zx-hover { transform: translateX(calc(var(--tacto-sube) * .9)); } /* La marca de la barra no se levanta: está pegada al borde de la pantalla y ahí un salto se lee como un fallo de pintado. Se le enciende el filo. */ .zx-marca:hover, .zx-marca.zx-hover { transform: none; box-shadow: 0 0 0 1px rgba(var(--tacto-color), var(--tacto-aro)); } /* Oro: el botón principal («empezar», «otra vez», «instalar»). */ :is(.boton, .boton-grande, .empezar, .instalar-app-boton, .apoyo-boton, .reto-boton):is(:hover:not(:disabled), .zx-hover) { --tacto-color: 255, 212, 121; filter: brightness(var(--tacto-brillo)); } /* Violeta: lo que lleva a otra cosa. */ :is(.siguiente, .zx-anuncio, .zx-parecido, .reto-suelto):is(:hover, .zx-hover) { --tacto-color: 185, 140, 255; } } /* fin de @media (hover: hover) */ /* --------------------------------------------------------------------------- El foco del teclado --------------------------------------------------------------------------- No es adorno: es la única pista de dónde estás si navegas con el tabulador. Lleva el mismo aro que el hover más un filo sólido, y funciona igual en móvil que en escritorio porque no depende del puntero. */ :is( .zx-tacto, .boton, .boton-plano, .boton-grande, .boton-fantasma, .siguiente, .pista-abajo, .info-otros a, .zx-marca, .zx-anuncio, .zx-parecido, .idioma, .sonido, .atras, .nav-esquina, .empezar, .compartir-viaje, .encuentro-seguir, .instalar-app-boton, .apoyo-boton, .reto-boton, .reto-suelto, .top-firmar, .dif ):focus-visible, #atras:focus-visible, #sonido:focus-visible { outline: 2px solid rgb(var(--tacto-color)); outline-offset: 3px; }