Caso Café Tortoni: Cómo reimaginamos una institución de 1858 con IA, contenido estructurado y un sistema de diseño vivo

Actuá como Lead Product Designer y Director Creativo especializado en patrimonio histórico y gastronomía.

CONTEXTO
Vamos a rediseñar la presencia digital oficial del [Gran Café Tortoni, Buenos Aires, fundado en 1858, ubicado en Av. de Mayo 825].
Sitio de referencia actual: [URL del sitio actual].
Fuentes públicas complementarias: catálogo de Bares Notables de la Ciudad y portal oficial de Turismo.

PROBLEMA DE NEGOCIO
El sitio actual es un portal institucional obsoleto (Joomla c. 2010):
- Carece de jerarquía visual y narrativa inmersiva.
- Navegación fragmentada con menús anidados que ocultan datos prácticos.
- La carta solo existe en un archivo PDF de 4.6 MB ilegible en móviles.
- Cero conversión para la venta o reserva de shows de tango en La Bodega.
- Desconexión con las necesidades de turistas internacionales y comensales locales en la fila.

ENTREGABLE DE ESTA ETAPA (Estrictamente sin diseño visual todavía):
1. Mapa del sitio conciso con el propósito unívoco de cada página.
2. Orden de secciones de la portada (Home) detallando qué dolor o duda resuelve cada bloque en menos de 5 segundos.
3. Textos y copys completos en castellano rioplatense pulido (tono cálido, respetuoso del voseo porteño, sin jerga publicitaria vacía).
4. Inventario de requerimientos fotográficos por sección: encuadre, escena, proporción (4:3 o vertical) y fuente de origen.

RESTRICCIONES
- Prohibido inventar datos operativos. Toda cifra, horario o precio no verificado debe quedar rotulado explícitamente como [A CONFIRMAR].
- Atender a tres perfiles simultáneos: turista internacional (necesita monedas, idiomas y ubicación ágil), turista nacional y parroquiano habitual.
- Idiomas: ES base, EN, PT, FR y DE como traducciones.

Actuá como Design Technologist y Arquitecto de Sistemas de Diseño.

CONTEXTO
A partir del análisis físico del edificio del [Café Tortoni, fachada de 1898 por Alejandro Christophersen, salón principal, boiserie, vitrales y marquesina], vas a codificar el Tortoni Design System.

REQUERIMIENTOS DE TOKENS
1. Paleta de Color:
   - Extraer exactamente 9 tonos extraídos directamente de los materiales de la fachada e interiores.
   - Para cada tono especificar: Nombre semántico, código HEX, elemento físico de procedencia, uso exclusivo permitido y ratio de contraste medido contra el fondo (cumplimiento mínimo WCAG AA de 4.5:1 para texto normal y 3:1 para componentes de interfaz).
   - Regla de aplicación armónica: 60% estructura/textos, 30% superficie/fondos y 10% acción focal.
2. Tipografía:
   - Seleccionar dos fuentes disponibles en Google Fonts.
   - Una tipografía Display con sabor de época (fines de siglo XIX) para titulares.
   - Una tipografía Sans-Serif con aperturas amplias para lectura en pantalla móvil con baja luz y soporte OBLIGATORIO de cifras tabulares (tabular-nums) para la carta.
3. Gestos de Forma Arquitectónicos:
   - Extraer 3 figuras geométricas basadas en el edificio (el arco de medio punto, el festón de la marquesina y el plomo del vitral), con sus reglas de código CSS.
4. Componentes Clave:
   - Especificación de botones: primario (acción única), secundario, outlined y estado agotado.
   - Fila de carta gastronómica: nombre del plato, puntos guía continuos de alineación, precio en columna y etiquetas de alérgenos.
   - El logotipo histórico no se altera: se respeta íntegramente como núcleo patrimonial.

Actuá como Senior Frontend Engineer experto en interfaces web de alto rendimiento.

CONTEXTO
Con el Tortoni Design System y el documento de arquitectura aprobados, implementá el prototipo navegable completo de la portada (Home) en un archivo HTML interactivo y responsivo.

ESTRUCTURA DE SECCIONES (en orden estricto):
1. Telón de Bienvenida y Portada Hero con propuesta de valor inmersiva.
2. Franja "Hoy en el Tortoni": horario en vivo, estado de fila y acceso inmediato a Subte A (Estación Piedras).
3. "La Casa": introducción literaria y esencia histórica.
4. "Tres Puertas": bifurcación de intenciones (El Salón de Café, La Bodega de Tango, La Sala Alfonsina Storni).
5. "La Carta": aperitivo visual de los clásicos (Chocolate con churros, Submarino, Tostado en pan de miga) con botón directo a la carta completa.
6. "Tango en La Bodega": cartelera de funciones semanales y widget modal de reserva en 3 pasos (fecha/hora, cantidad de entradas, datos de contacto y confirmación).
7. "Historia y Memoria": línea de tiempo viva desde 1858.
8. "La Vereda de Avenida de Mayo": comparador interactivo de imagen antes/después (c. 1900 vs 2026).
9. "Cinco cosas para mirar en el salón": guía de detalles patrimoniales.
10. Pie de página institucional y datos útiles.

REQUISITOS TÉCNICOS
- Enfoque Mobile-First real: en pantallas móviles incluir barra de navegación inferior fija con acceso a [Carta, Tango, Ubicación] y botón flotante de WhatsApp.
- Botones de acción táctiles con altura mínima de 48px (touch target de accesibilidad).
- Respetar 'prefers-reduced-motion' en todas las transiciones y animaciones.
- Cero dependencias externas pesadas: solo HTML5 semántico, CSS determinista y Vanilla JS ligero.

Actuá como Frontend Architect y especialista en UX gastronómica.

CONTEXTO
Desarrollá la página independiente de la Carta Digital Completa del [Café Tortoni] (`carta.html`), sincronizada estilísticamente con la Home.

CARACTERÍSTICAS FUNCIONALES OBLIGATORIAS:
1. Navegación por pestañas fijas superiores: 8 categorías (Cafetería histórica, Chocolate y pastelería, Tostados y sándwiches, Copas y postres, Platos del salón, Vinos y aperitivos, Sin TACC, Para llevar). Al hacer scroll, la pestaña activa debe sincronizarse automáticamente mediante IntersectionObserver.
2. Buscador en tiempo real: filtrado instantáneo por texto que normalice y reconozca caracteres acentuados (ignore tildes y mayúsculas).
3. Barra de etiquetas de dieta: píldoras clicables para [Clásico, Sin TACC, Vegetariano, Para llevar]. Si un filtro deja la vista vacía, mostrar estado vacío elegante con botón de restablecimiento.
4. Selector de Divisa: alternar entre Pesos Argentinos (ARS) y cotización aproximada en Dólares Estadounidenses (USD) con nota aclaratoria de cambio orientativo para turistas.
5. Fila de producto gastronómico: nombre del ítem, línea continua de puntos guía (dotted leader), precio con cifras tabulares, descripción de ingredientes y etiquetas dietarias.

Actuá como QA Engineer y Desarrollador Frontend de Precisión.

INSTRUCCIÓN
Aplicá correcciones quirúrgicas sobre el archivo de código proporcionado. No reescribas código que no esté afectado. Reportá exactamente las líneas modificadas.

REGLA DE REPORTE:
Cada problema debe abordarse bajo el esquema estricto:
- Ubicación: [Ruta de archivo, componente, selector CSS o número de línea]
- Problema observado: [Comportamiento anómalo en pantalla, recorte visual, error de consola o rotura en viewport móvil]
- Resultado esperado: [Comportamiento corregido esperado, valores exactos de padding/overflow/z-index y validación en iOS/Android]

EJEMPLO DE APLICACIÓN:
1. Ubicación: `#que-ver .carousel-item img`
   - Problema observado: Al hacer scroll descendente en viewports menores a 768px, la imagen del vitral superior se recorta 40px por culpa de un overflow-hidden rígido en el contenedor padre.
   - Resultado esperado: Aplicar `object-fit: cover` con `aspect-ratio: 4/5`, padding superior compensado de 16px y contenedor fluido para que la moldura completa sea visible en iPhone y Android sin desborde horizontal.

Actuá como Editor Fotográfico Digital y Director de Arte Web.

CONTEXTO
Vamos a estandarizar un lote de fotografías actuales del [Gran Café Tortoni] recolectadas para el prototipo digital.

ESPECIFICACIONES DEL TRATAMIENTO:
- Proporción de salida: 4:3 horizontal estricto en alta resolución (mínimo 2400 × 1800 píxeles, 72 dpi web).
- Fidelidad documental: preservar la composición genuina, la textura real del mármol, las vetas de la madera de roble y los detalles de las molduras. Prohibido agregar, eliminar o sustituir objetos del salón.
- Limpieza técnica: mitigar ruido digital, corregir artefactos de compresión JPEG procedentes de redes sociales, y corregir aberraciones cromáticas en las luces de los apliques de bronce.
- Iluminación y Colorimetría: balance de blancos templado y acogedor, emulando la luz natural tamizada por los vitrales en horas de la tarde. Evitar saturación excesiva, contrastes radioactivos o acabados de filtro artificial HDR.
- Extensión generativa coherente: si la imagen de origen no cubre la relación 4:3, completar los márgenes mediante extensión inteligente de fondo respetando la perspectiva de las paredes, pisos y molduras existentes.

Actuá como Conservador de Archivo Fotográfico Patrimonial y Especialista en Restauración con IA.

CONTEXTO
Restauración de fotografías históricas del [Gran Café Tortoni c. 1900, la vereda de Avenida de Mayo y tertulias históricas de La Peña].

DIRECTIVAS DE PRESERVACIÓN:
- Misión: devolver la nitidez y presencia original a la imagen de época sin reinventarla ni modernizarla anacrónicamente.
- Limpieza física: remover rayas superficiales, manchas de emulsión química, roturas de pliegue y motas de polvo del escaneo.
- Definición óptica: aumentar la resolución y el detalle en frentes de locales, farolas a gas, sombreros y fisonomías, respetando el grano fotográfico natural del haluro de plata original.
- Fidelidad de tono: preservar de manera intransigente la escala de grises y los baños virados a sepia originales. Queda estrictamente prohibido colorear la imagen de forma automática.
- Política de Transparencia: la imagen llevará en su metadato y epígrafe visual el crédito "Fotografía de archivo c. 1900 restaurada con inteligencia artificial".