Crea una web minimalista suiza para un despacho jurídico o contable con señales de confianza

Construye un sitio estático multipágina de estilo minimalista suizo para nuestro despacho en mi servidor de hosting de Opus Growth [server name]. Despacho: [practice name], [profession, e.g. law firm or accounting practice], [city]. Áreas de práctica: [areas]. Profesionales: [for each, name, title, bar or chamber they are registered with, registration number, areas]. Teléfono: [phone], email: [email], dirección: [address], dominio: [domain]. Tema de la nota informativa: [a frequently asked topic, e.g. the legal cap on rent increases]. Este es un ámbito en el que las personas toman decisiones sobre su dinero y sus derechos, así que la confianza debe venir de la claridad, las credenciales y las fuentes, no de la decoración. Respeta las normas profesionales: para abogados en Turquía, el reglamento de la Unión de Colegios de Abogados de Turquía sobre la prohibición de publicidad; para contables, las normas profesionales de TÜRMOB; o el equivalente donde ejerzas. No escribas porcentajes de éxito, número de casos ganados, nombres de clientes, afirmaciones de superioridad como "el mejor" o "experto líder", comparaciones de honorarios, garantías ni promesas exageradas. Presenta la información con una nota que aclare que es de carácter general y no sustituye el asesoramiento jurídico o financiero. La dirección de diseño es minimalista suiza: 1. Tipografía: una sola familia grotesca de Fontshare (por ejemplo Switzer 400, 500, 600). La jerarquía se construye solo con tamaño y peso: un titular grande, ajustado y alineado a la izquierda, texto de cuerpo sereno y pequeñas etiquetas de sección. 2. Color: fondo blanco, texto casi negro, un gris oscuro y un único acento (por ejemplo rojo suizo). El acento aparece solo en la marca de sección, las etiquetas y el anillo de foco. Las fotos son en blanco y negro (Tailwind grayscale). 3. Cuadrícula: 12 columnas estrictas. En cada sección la etiqueta ocupa las columnas 1 a 3 y el contenido las columnas 4 a 12; las secciones se separan con una línea negra de 1 píxel. Sin esquinas redondeadas ni sombras. 4. Elemento distintivo: etiquetas de sección numeradas con una marca § en el color de acento, y tenues líneas guía de 12 columnas dibujadas solo con CSS detrás de la primera pantalla. 5. Movimiento: ninguno. Páginas y su schema: 1. index.html: una primera pantalla cuyo párrafo inicial responda a "qué asuntos, para quién, dónde", las áreas de práctica, cómo trabajáis y cómo se fijan los honorarios (sin cifras, con el arancel oficial y una hoja de encargo por escrito), la última nota informativa y un resumen del equipo. WebPage. 2. calisma-alanlari.html: una sección por área; el primer párrafo responde a la pregunta más habitual de esa área, seguido de los temas principales y la base legal. Un Service por área. 3. ekip.html: un perfil para cada profesional (nombre, título, colegio o cámara, áreas, breve biografía). AboutPage y un Person por profesional (jobTitle, knowsAbout, worksFor #business, memberOf el colegio o la cámara). 4. bilgi-notlari/[topic].html: una nota basada en la normativa que abra con una respuesta breve. En la parte superior: autor, revisor, fecha de publicación y fecha de la última revisión; al final, una lista de fuentes. Article (autor y editor mediante @id, image, datePublished, dateModified, citation) y reviewedBy más lastReviewed en la WebPage. No escribas nunca un punto jurídico o financiero que no conozcas; pregúntame por cada frase de la que dudes. 5. sss.html: seis preguntas reales, FAQPage. 6. iletisim.html: ContactPage. 7. kvkk.html (con mención al secreto profesional) y 404.html. Reglas técnicas. Síguelas al pie de la letra, porque los controles de más abajo miden exactamente esto: 1. Preparación. Ejecuta primero scaffold_site como vista previa, muéstrame la lista de archivos e instala con confirm=true cuando yo lo apruebe. Después lee completas site_design_guide y site_seo_guide. Antes de escribir código, escribe la dirección creativa en _kaynak/ART.md (sensación, combinación tipográfica, colores con sus ratios de contraste, cuadrícula, elemento distintivo, decisión sobre el movimiento, lista de páginas) y muéstramela. 2. Elimina el JavaScript. Ninguna página de este sitio carga JavaScript. Quita de cada página el script cdn.tailwindcss.com, la línea tailwind.config, las etiquetas de GSAP, ScrollTrigger, SplitText, Lenis y Swiper y las etiquetas script de motion.js, chrome.js y site.config.js; borra assets/chrome.js y assets/motion.js. Conserva assets/site.config.js, pero solo como fuente de marca, contacto y seo para seo-stamp.mjs; nunca se carga en el navegador. 3. Menú y pie de página en HTML estático. Los componentes <site-nav> y <site-footer> los dibuja JavaScript, de modo que los rastreadores de búsqueda y de IA no ven el menú, los enlaces internos ni los datos de contacto. Escribe la cabecera en _kaynak/ust.inc y el pie (nombre, dirección, teléfono, email, enlaces a todas las páginas, aviso de privacidad, "Web: Opus Growth") en _kaynak/alt.inc. Usa la extensión .inc para que seo-stamp y html-validate no traten los fragmentos como páginas. Cada página lleva los marcadores <!-- ust:bas --><!-- ust:son --> y <!-- alt:bas --><!-- alt:son -->. Luego escribe con site_write_file un script de Node sin dependencias en _kaynak/parca-bas.mjs: estampa ambos fragmentos entre los marcadores en cada archivo HTML, añade aria-current="page" al enlace del menú de la página actual y reescribe sitemap.xml usando como lastmod el dateModified del JSON-LD de cada página (omitiendo 404 y las páginas noindex). Construye el menú móvil sin JavaScript con <details><summary>Menu</summary>; el menú de escritorio y el móvil son dos elementos <nav> distintos con aria-label diferentes. 4. Aloja las fuentes tú mismo. Este sitio usa una sola familia tipográfica y tres archivos como máximo. Descarga el CSS de Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap, código de peso 401 para cursiva) con site_fetch a _kaynak/fontshare.css, léelo con site_read_file y toma solo las URL woff2 de la familia que pediste; el servicio a veces añade una familia que no solicitaste. Descarga cada woff2 con site_fetch en assets/fonts/. Pon las reglas @font-face (font-display: swap) dentro de assets/app.css, porque design-check.mjs solo busca una fuente personalizada en ese archivo. No uses las predeterminadas Inter, Roboto, Poppins ni Montserrat. 5. Compila Tailwind. assets/app.css pasa a ser el código fuente de Tailwind: @tailwind base; @tailwind components; @tailwind utilities; al principio, luego @font-face, el anillo de foco, el skip link, una regla prefers-reduced-motion y tus propias clases de componente dentro de @layer components. No des nunca a una clase de componente el nombre de una utilidad de Tailwind (list-item, table, grid, container, hidden, etc.), porque el choque rompe el diseño en silencio tras la compilación. Escribe tailwind.config.js en la raíz (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"], colores y fontFamily). Ejecuta "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" con site_run_command y background=true, y espera con site_command_status. El <head> de cada página contiene, en este orden: un único <link rel="stylesheet" href="/assets/site.css">, después una línea preload por cada archivo de fuente usado en la primera pantalla (titular, acento y cuerpo; as="font" type="font/woff2" crossorigin). Las líneas preload colocadas antes de la hoja de estilos retrasan el CSS y alargan el LCP; una fuente de la primera pantalla sin preload se cambia tarde, desplaza la página y sube el CLS; y <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. La línea del favicon es obligatoria: sin ella el navegador pide /favicon.ico, recibe un 404 y el error de consola baja la puntuación de Best Practices. 6. Imágenes. Descarga las fotos con site_fetch usando resize e image_format="webp" en varios anchos (480, 800, 1200 y 1600 para la imagen de la primera pantalla; 480, 800 y 1200 para el resto; calidad entre 60 y 75, más baja para fotos con mucho detalle). Cada <img> lleva srcset, sizes acordes con el diseño real, width y height (CLS cero) y un texto alt significativo y honesto. fetchpriority="high" va solo en la imagen que Lighthouse señala como elemento LCP, y esa imagen no es lazy; todas las demás usan loading="lazy". Si el elemento LCP es texto, ninguna imagen lleva fetchpriority. Prepara también assets/img/logo.png, un assets/img/og.jpg de 1200x630 y assets/img/favicon.svg. 7. Reglas HTML (valores por defecto de html-validate). <!DOCTYPE html> en mayúsculas; sin atributo style en línea (incluido el style="background:var(--brand)" del kit; usa una clase en su lugar); &nbsp; en lugar de espacios normales en el texto de los enlaces tel:; un type en cada <button>; sin espacios al final de línea; tablas con <thead>, <tbody> y th scope. Los enlaces dentro de párrafos van subrayados; los enlaces del menú, el pie, las migas de pan y los botones tienen un área táctil de al menos 44x44 píxeles (min-h-[44px] min-w-[44px]). 8. Datos estructurados. Rellena el bloque seo de site.config.js (siteUrl, description, logo, imagen og, tipo de negocio, campos de dirección) y ejecuta "node seo-stamp.mjs" con site_run_command; estampa Organization, WebSite y, cuando proceda, un subtipo de LocalBusiness, además de las etiquetas canonical y OG. Añade a mano el schema específico de cada página: en todas un nodo WebPage con @id (o AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished y dateModified, isPartOf #site, about #business o #org, y breadcrumb apuntando a un BreadcrumbList; además un Service por área de práctica, un Person por profesional en la página del equipo, Article y reviewedBy en la nota informativa y FAQPage en la página de preguntas frecuentes. Escribe cada nodo en su PROPIO bloque <script type="application/ld+json"> y no uses un envoltorio @graph, porque seo-check.mjs solo lee el @type de nivel superior y no detecta un BreadcrumbList dentro de @graph. Enlaza los nodos con @id. No inventes nunca horarios, coordenadas, valoraciones, reseñas, premios, número de clientes ni certificados; deja fuera los campos que no conozcas. 9. Acceso para IA. Escribe robots.txt: todo el sitio abierto, solo /_kaynak/ cerrado; Allow: / para GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended y Bingbot; tu decisión sobre CCBot con el motivo como comentario; la línea Sitemap al final. Añade llms.txt en la raíz: un resumen correcto del negocio en dos frases, las páginas importantes con una línea cada una y los datos de contacto. Escribe 404.html (noindex, con los marcadores de cabecera y pie). 10. Redacción. Cada página tiene al menos 150 palabras de texto original dentro de <main>, y el primer párrafo responde directamente a la pregunta principal de la página. Los títulos tienen entre 48 y 60 caracteres, las descripciones entre 145 y 158, únicos en cada página. Sin rayas largas ni medias, sin eslóganes manidos, sin promesas vacías. Si algo del sitio no es real, indica claramente que es ficticio. Controles. Tras cada cambio, ejecútalos con site_run_command en este orden y no avances hasta que cada uno salga limpio: 1. node _kaynak/parca-bas.mjs, node seo-stamp.mjs, la compilación de Tailwind (de nuevo si añadiste clases). 2. node seo-check.mjs: 0 errores y 0 avisos. Si avisa "gövde kısa" (cuerpo demasiado corto), añade texto real, no relleno. 3. node design-check.mjs: 0 errores. El único aviso admisible es "Hiç hareket yok" (sin movimiento); el estilo lo exige, así que explica el motivo en el informe. 4. npx --yes html-validate "**/*.html": 0 errores. 5. Revisa cada página con site_preview en view="mobile" y view="desktop", y comprueba también la página de inicio a 360 y 768 píxeles. Corrige cualquier desbordamiento horizontal, titular apretado o área táctil menor de 44 píxeles y vuelve a mirar. 6. Mide