La máquina de antojos

Crea una página web completa (un solo archivo HTML con CSS y JS incluidos) llamada "La máquina de antojos": una tómbola de puesto de mercado que decide qué vas a comer hoy en [CIUDAD], especializada en [COMIDA], con humor de tono [TONO]. OBJETIVO Una máquina expendedora de decisiones para gente que tiene hambre pero no criterio. La emoción: risa y antojo al mismo tiempo. Quien la use debe pensar "esta máquina me conoce", no "qué app tan bonita". Prohibida la estética de app de delivery: esto es un mueble de mercado, lámina pintada a mano, un ticket que sale impreso. ESCENARIO La máquina vive en un pasillo del mercado de [CIUDAD], entre puestos que no existen pero deberían. Le dices qué hora es, cuánta hambre traes y cuánto dinero hay en la bolsa; ella gira y te imprime un ticket con tu destino gastronómico. Los puestos son inventados; el antojo, no. DIRECCIÓN VISUAL - Fondo crema papel #FFF6E8 con un puntilleo sutil de papel; rojo cocina #D6402B para la máquina, el botón y los acentos; azul banquito #2E5FA3 para marcos, loza y etiquetas; tinta #1E1A17 para el texto. Un amarillo maíz #EFB74C se permite solo dentro de las ilustraciones de comida. - Tipografía: Avenir / Avenir Next (con fallback a Nunito y system-ui), pesos 600–800. Números gordos (peso 800, tabulares) en los diales, el precio y el folio. - Composición: máquina centrada con toldo de festones rojo y crema dibujado en SVG, una placa que diga "GIRE Y CONFÍE", tres diales grandes, un botón rojo imposible de no apretar y una ranura oscura de la que sale el ticket hacia abajo. En pantallas anchas y horizontales, el ticket queda a un lado, ligeramente girado, como pegado con cinta. - El ticket es blanco, con borde inferior en zigzag (corte de impresora), separadores de línea punteada, código de barras dibujado en SVG y folio. CONTENIDO (todo en español, escríbelo tú, con ingenio; cero lorem ipsum) - Título: "LA MÁQUINA DE ANTOJOS" y debajo "Mercado de [CIUDAD] · [COMIDA]". - Tres diales con estas preguntas y opciones: "¿Qué hora es?" (Mañana 7–11 / Mediodía 12–16 / Tarde 17–20 / Noche 21+), "¿Cuánta hambre?" (1 Antojito / 2 Con ganas / 3 De obra) y "¿Cuánto traes?" (Hasta $40 / Hasta $80 / Sin tope). - Un menú interno de 12 platillos ficticios de [COMIDA], cada uno con nombre con carácter, puesto inventado, precio en MXN y una línea de descripción que dé risa y hambre a la vez. Ejemplos del nivel esperado: Tlacoyos "Los Madrugadores" de La Plancha de Doña Chela ($35), Torta de tamal "La Andamio" de El Termo Valiente ($32), Esquite "Marea Alta" de El Vaso Que Habla ($30), Pozole "El Consuelo" de la Fonda La Segunda Vuelta ($85). Completa la docena con ese mismo espíritu. - El ticket imprime: nombre del puesto, ilustración del platillo, nombre del platillo, su descripción, los tres datos elegidos en filas con puntos de guía, el TOTAL en números gordos, una "Sugerencia de la máquina" distinta según la combinación, un folio tipo GDL-000 y la línea final "Propina sugerida: contarle a alguien." - Bajo el botón, un letrero chico: "La máquina no se equivoca. Usted a veces sí." COMPORTAMIENTO - La recomendación es determinista, nada de azar puro: cada platillo declara en qué horas brilla, para qué niveles de hambre alcanza y cuánto cuesta. La máquina filtra el menú por presupuesto, puntúa la coincidencia de hora y de hambre, y desempata por precio. La misma combinación imprime siempre el mismo ticket. - Cambiar cualquier dial re-imprime el ticket al momento, con animación de impresora: el papel baja a pasos (steps de CSS), no con deslizado suave. - El botón "¡OTRA VUELTA!" recorre en orden las siguientes opciones de la misma combinación y vuelve al inicio al agotarlas. - Al cargar la página, la máquina ya imprimió un primer ticket (Mediodía, hambre 2, hasta $80). - Las ilustraciones de los platillos son SVG inline planos, ocho o más distintas, sin imágenes externas. RESTRICCIONES - Un solo archivo HTML que funcione abriéndolo directo en el navegador. Sin librerías, sin fuentes externas, sin peticiones a internet. - Responsive real: a 390 px todo apilado y usable con el pulgar (los diales se vuelven filas); en horizontal ancho, máquina y ticket lado a lado. Sin scroll horizontal. - Contraste AA en todo el texto. Los diales son botones reales con aria-label y la zona del ticket usa aria-live="polite". - Cero errores de consola. Respeta prefers-reduced-motion apagando la animación del ticket. FORMATO DE ENTREGA Un único bloque de código con el archivo index.html completo, listo para guardar y abrir. Nada de explicaciones antes o después. VARIABLES PARA PERSONALIZAR - [CIUDAD]: ciudad del mercado. Ejemplo: Guadalajara. - [COMIDA]: especialidad de la máquina. Ejemplo: antojitos de maíz. - [TONO]: humor del copy. Ejemplo: juguetón.