# CONTEXTO DEL SISTEMA: CORPORATIVA Este archivo reune todos los documentos de apoyo de un proyecto Corporativa en uno solo. Cada parte empieza con una linea `=== NOMBRE_DEL_ARCHIVO ===` y termina con `=== FIN DE NOMBRE_DEL_ARCHIVO ===`. Cuando las Instrucciones del Proyecto nombren un archivo, busca esa parte aqui y usa solo la que corresponde a la fase en curso. `Contrato_Corporativa.md` manda sobre los demas. ## Indice - `Contrato_Corporativa.md`: Todas las fases: contrato Corporativa (manda sobre los demas) - `Plantilla_Business_Info_Copiar_y_Pegar.md`: Fase 1: plantilla de Business Info (zonas: ver Contrato Corporativa, seccion 2) - `Esquema_JSON_Wizard_Corp_v1.md`: Fases 5 y 12: esquema del JSON del wizard - `Ejemplo_JSON_Corporativa.json`: Fase 5: ejemplo de contenido.json que valida - `Guia_Paso_a_Paso_Header_Settings_v3.1.md`: Fase 6: contrato del header (Parte F, con los cambios del Contrato Corporativa) - `Guia_Paso_a_Paso_Footer_Settings.md`: Fase 7: contrato del footer (Parte E, con los cambios del Contrato Corporativa) - `Contrato_Formularios.md`: Fase 8: contrato de formularios - `Formularios_CSS_Base.css`: Primera seccion con formulario: base del CSS del formulario - `Contrato_Paginas_Home_About_Contact.md`: Fase 8: contrato de paginas (estructura y bloque de textos; las secciones salen del Contrato Corporativa) - `Contrato_Selector_Servicios.md`: Fase 8.3: contrato del selector de servicios - `Selector_Servicios_Base.php`: Fase 8.3: codigo base del selector de servicios (se adapta, no se reescribe) - `Legales_CSS_Base.css`: Fase 10: base del CSS de paginas legales === Contrato_Corporativa.md === (Todas las fases: contrato Corporativa (manda sobre los demas)) # CONTRATO CORPORATIVA (manda sobre cualquier otro documento del Contexto) Este proyecto es de tipo CORPORATIVA. Los demás documentos del Contexto (guía del header, guía del footer, contrato de páginas, plantilla de Business Info) se escribieron primero para sitios con páginas de servicios y de áreas. **Cuando alguno contradiga este contrato, manda este contrato.** Donde este contrato no dice nada, sigue el otro documento. ## 1. Cómo es un sitio Corporativa | Elemento | Regla | |---|---| | Páginas | 8, todas ya creadas, vacías y publicadas en el WordPress base: Home (`/`), About Us (`about-us`), Services (`services`), Gallery (`gallery`), Blog (`blog`), Contact (`contact`), Privacy Policy (`privacy-policy`) y Terms of Use (`terms-of-use`). | | Servicios | El CPT `service` guarda los datos, pero **un servicio no tiene página ni URL propia**. La página Services los muestra con el selector. Cada servicio tiene el ancla `#svc-{slug}` (el slug de la entrada) dentro de la página Services. | | Galería por servicio | Cada servicio trae su propia galería (`svc_gallery`, máximo 6 fotos) que se muestra dentro de su detalle en Services. Además existe la página Gallery general. | | Áreas | **No son páginas ni enlaces.** Son texto: la lista de `biz_areas`. No existe el CPT `area` ni las páginas Service Areas. | | Blog | Página Blog (`/blog/`) y plantilla Single Post. Las entradas se crean con el wizard. | | Wizard | CM Wizard Corporativa (crea y actualiza servicios y entradas de blog; nunca áreas). | ## 2. Business Info: zonas (cambia la regla de la fase 1) - `biz_areas` lleva **todas las zonas que los textos del cliente mencionan** (estados, regiones y ciudades), una por fila, con la **zona principal en la primera fila**. Ciudades como "Lancaster, NH"; estados o regiones por su nombre. - Siguen valiendo las reglas de siempre: solo lo que los textos dicen de verdad, sin suponer, y las contradicciones van a DUDAS. No hay sección CIUDADES DETECTADAS. - Las zonas se muestran solo como texto, nunca como enlaces. `{areas}` y `{in_areas}` funcionan igual (máximo 2 zonas en títulos). ## 3. JSON del wizard (fase 5) - Esquema: `Esquema_JSON_Wizard_Corp_v1.md`. Ejemplo que valida: `Ejemplo_JSON_Corporativa.json`. El JSON lleva `"site_type": "corporate"`. - Items permitidos: `service` y `post`. Nunca `area`. - Servicio: obligatorios `svc_short_description` y `svc_intro`; opcionales `svc_icon`, `svc_includes`, `svc_benefits`, `svc_status`, `svc_menu_show`. **No se piden** FAQ, proceso, hero, meta title, meta description ni focus keyword. La galería del servicio no va en el JSON: el equipo sube las fotos en `svc_gallery`. - Entrada de blog: `id`, `title`, `content` (HTML simple), `excerpt`, `category`, `date` (AAAA-MM-DD) y `status`. Pide cuántas entradas quiere el equipo si no lo dijo; si no hay tema definido, propón temas del rubro del cliente. - Reglas de contenido: nunca escribas a mano teléfono, email, dirección, años ni nombre de la empresa (usa `{phone}`, `{email}`, `{address}`, `{years}`, `{company}`, `{areas}`), tampoco en el contenido de las entradas; inglés americano; sin guion largo (—) ni "across"; sin imágenes; sin PENDIENTE. Si falta un dato del negocio, redacta sin él. - `svc_icon` es solo el nombre del ícono de Font Awesome, sin prefijo. `position` ordena los servicios (1, 2, 3...). - Entrega un archivo descargable `contenido.json`, sin explicaciones, y verifica antes los conteos y que no haya datos críticos escritos a mano. ## 4. Header (fase 6) Sigue la Parte F de la guía del header, con estos cambios: 1. **Menú fijo, en este orden:** Home, About Us, Services (megamenú), Gallery, Blog y Contact. Todos son páginas. No hay Service Areas. 2. **Enlaces:** cada página se busca por su slug con `get_page_by_path()` y se arma con `get_permalink()`; si no existe o no está publicada, no se imprime. Cada servicio del megamenú lleva a `get_permalink( página services ) . '#svc-' . $slug`. El enlace "Services" lleva a la página Services. 3. **Megamenú de Services:** lista de servicios publicados, por `menu_order` y título, sin los de `svc_menu_show` apagado (reglas 43 a 51 de la guía, sin las de áreas). Menú móvil: Services como acordeón con "All Services" y cada servicio. 4. **Botón principal:** enlace de `hdr_btn_link`; si está vacío, la página Contact. 5. **Enlace activo:** lo calcula PHP en cada página (`is_front_page()`, `is_page()`, y Blog también en las entradas). Services queda activo en la página Services. 6. **Desplazamiento suave:** el CSS del header declara `html { scroll-padding-top: var(--hdr-main-h); scroll-behavior: smooth; }` y, dentro de `@media (prefers-reduced-motion: reduce)`, `scroll-behavior: auto`. Es obligatorio. ## 5. Footer (fase 7) Sigue la Parte E de la guía del footer, con estos cambios: 1. **Cuatro columnas fijas:** Brand, Services (con Company debajo), Areas We Serve y Contact. Sin hueco si una columna no tiene datos. 2. **Services:** servicios publicados (reglas de la guía), con enlace `get_permalink( página services ) . '#svc-' . $slug`. "View All" al final, hacia la página Services, solo si existe y está publicada. 3. **Areas We Serve:** lista **de texto, sin enlaces**, con las zonas de `biz_areas` (la principal primero), hasta `ftr_list_limit`. Sin zonas, la columna no se imprime. No hay "View All". 4. **Company:** About Us, Gallery, Blog y Contact, cada uno solo si su página está publicada. 5. El botón flotante Free Estimate usa `hdr_btn_link` o, si está vacío, la página Contact. 6. Los enlaces legales (Privacy Policy y Terms of Use) siguen siendo obligatorios. ## 6. Páginas (fase 8) Cada página se construye con los elementos Code por sección, con su clase `.sec-nombre`, su bloque de textos editables y el contrato de páginas. Un solo H1 por página, en su Hero. Primero el bloque "SEO DE LA PÁGINA" y después el código. **8.1 Home:** Hero, presentación breve (About) con botón a la página About Us, por qué elegirnos (opcional), **servicios** (tarjetas dinámicas, cada una enlazada a `{página services}#svc-{slug}`, y "View All Services" a la página Services), zonas como texto (si hay `biz_areas`), vista previa de la galería (opcional, con enlace a Gallery), últimas entradas del blog (opcional, con enlace a Blog), testimonios (Trustindex) y llamada final a Contact. Sin formulario obligatorio en la Home. **8.2 About:** Hero interior (H1), historia, años de experiencia, propietario, misión y visión y licencia (solo los que existan en Business Info) y llamada a Contact. **8.3 Services:** Hero interior (H1) y la sección del selector con `id="services"`. Se usa `Selector_Servicios_Base.php` de Contexto: **no lo reescribas**, solo adapta el CSS al diseño del proyecto y los textos del bloque editable, y respeta `Contrato_Selector_Servicios.md`. Mantén los nombres de clase `sec-svcsel__*`, los ids `svc-{slug}` y `tab-{slug}`, el atributo `data-svc` y el JavaScript. En Corporativa el selector muestra la galería de cada servicio (`svc_gallery`). Cierra con llamada a Contact. **8.4 Gallery:** Hero interior (H1), cuadrícula con las imágenes del campo ACF **`gal_images`** (Galería, retorno ID) de la página Gallery, y llamada final a Contact. Cada imagen con `width`, `height`, `alt` (el de la biblioteca; si está vacío, `{company}` y la palabra "project") y `loading="lazy"`. Cuadrícula sin huecos con 1, 2, 3, 4 y 20 imágenes (columnas calculadas en PHP, última fila centrada). Sin filtros ni categorías. Ampliar la imagen es opcional, con ``, JavaScript mínimo, cierre con Escape y foco controlado. Con el campo vacío, la cuadrícula no se imprime. **8.5 Blog Overview (`/blog/`):** Hero interior con H1 "Blog", cuadrícula de entradas publicadas con imagen, título, extracto, fecha y enlace (`get_permalink()`), paginación y llamada final. Sin huecos con 1, 2, 3 y 20 entradas. Sin entradas: un mensaje corto en lugar de la cuadrícula. Sin campos ACF, sin autor ni comentarios. **8.6 Contact:** Hero interior (H1), datos de contacto de Business Info (teléfono, email, dirección y horario, solo los que existan), mapa si hay dirección y el formulario global `[biz_form]`. Aquí se aplica la regla FORMULARIO: el CSS del formulario va en la primera sección del proyecto que lleve formulario. ## 7. Plantilla Single Post (fase 9) Una sola plantilla (las entradas no tienen campos ACF), construida con elementos Code dentro de la plantilla Single de Bricks con condición Post type = `post`. | Dato | Cómo se muestra | |---|---| | Título | H1 | | Imagen destacada | Cabecera, con `alt`. Si no hay, no se imprime hueco | | Fecha y categoría | Metadatos, con enlace de categoría con `get_category_link()` | | Contenido | `the_content()` con estilos de lectura legibles (ancho de línea cómodo, títulos, listas, imágenes, citas) | | Entradas relacionadas | Misma categoría, publicadas, sin la actual, hasta 3, sin huecos | | Llamada final | Teléfono (`biz_phone_href()`) y botón a Contact | Reglas: el código empieza comprobando `get_post_type() === 'post'` y se detiene si no; sin autor ni comentarios; texto de campos con `esc_html( biz_tokens() )`; sin etiquetas de edición ni cuadros de SEO (el SEO se pega a mano en Bricks); un solo H1; enlaces solo con `get_permalink()`; diseño libre. ## 8. SEO de las páginas El bloque "SEO DE LA PÁGINA" (meta title, meta description y focus keyword) se entrega para Home, About, Services, Gallery, Blog, Contact, Privacy Policy y Terms of Use. Los servicios no tienen SEO propio porque no tienen página. - **El SEO va en texto plano y se pega a mano en Bricks** (Page Settings > SEO de cada página). No hay Rank Math ni marcadores: nunca `{company}`, `{in_areas}` ni otros en el meta title o la meta description. Se escribe el nombre real del servicio, de la empresa y de la zona, tomados de la Ficha_Proyecto.md. - Meta title máximo 60 caracteres y meta description máximo 155. Máximo 2 zonas; con 3 o más se usa solo la zona principal. - El focus keyword es de referencia: orienta el H1, el primer párrafo y el resto del texto, y no se pega en ningún campo. - El SEO de la Home cubre el servicio principal y la zona principal (por ejemplo "Roofing in Newburgh, NY"). ## 9. Revisión antes de entregar - [ ] Un servicio del megamenú abre la página Services con ese servicio abierto y baja a la sección, también desde otras páginas. - [ ] Cada servicio muestra su galería y no deja huecos si tiene 1, 2, 3 o 6 fotos. - [ ] Despublicar un servicio: desaparece del megamenú, del selector, de la Home y del footer sin dejar huecos. - [ ] Las zonas se ven como texto, sin enlaces, con la principal primero. - [ ] No existe ningún enlace a páginas de servicio ni de área. - [ ] La galería general muestra las imágenes de `gal_images`; el blog pagina bien; la entrada del blog se ve completa. - [ ] Un solo H1 por página y sin scroll horizontal en 320, 768 y 1280 px. === FIN DE Contrato_Corporativa.md === === Plantilla_Business_Info_Copiar_y_Pegar.md === (Fase 1: plantilla de Business Info (zonas: ver Contrato Corporativa, seccion 2)) # Plantilla: Business Info listo para copiar y pegar **Para qué sirve:** que la IA lea los PDFs y el brief del cliente y entregue **todos los datos de Business Info ya ordenados, campo por campo**, para pegarlos en WordPress sin buscar nada. Reemplaza buscar a mano en los PDFs. No usa el wizard. **Cuándo se usa:** al empezar cada proyecto, antes de crear el contenido. Se pega el prompt de la Parte A en el chat de la IA y se adjuntan los PDFs del cliente. **Dónde se pega el resultado:** en **Business Info** de WordPress, campo por campo, en el orden de la tabla. --- ## PARTE A: Prompt para pegar en el chat (junto con los PDFs) ```` Lee todos los PDFs y documentos adjuntos del cliente y entrégame los datos de BUSINESS INFO listos para copiar y pegar en WordPress. REGLAS 1. Usa SOLO información que aparezca en los documentos. Prohibido inventar o completar datos. Si un dato no existe, escribe: NO ENCONTRADO. 2. Si dos documentos se contradicen en un dato, escribe el valor más reciente o más completo y márcalo con (REVISAR) y una línea explicando el conflicto en la sección DUDAS. 3. Todo el texto va en inglés americano. Sin guion largo (—) y sin la palabra "across". 4. Respeta exactamente los formatos de abajo. El valor de cada campo va **solo**, sin comillas y sin explicaciones dentro del valor. 5. COPIA SIN ERRORES: cada valor se entrega dentro de su **propio bloque de código** (para que el equipo use el ícono de copiar y no copie a mano). Dentro del bloque va ÚNICAMENTE el valor: sin espacios al inicio ni al final, sin saltos de línea, sin comillas, sin etiquetas y sin texto extra. Usa solo caracteres normales de teclado: comillas rectas ("), apóstrofe recto ('), guion simple (-) y espacios normales (nunca espacios no separables, comillas curvas ni guiones largos). 6. No pongas colores, tipografías ni contenido de páginas. Solo los datos de esta lista. FORMATOS - biz_company_name: nombre legal tal como aparece en el documento (con LLC, Inc., etc. si lo trae). - biz_years_experience: solo un número entero. - biz_mission y biz_vision: una frase corta cada una, tomada del brief. Si no existe, NO ENCONTRADO. - biz_phones: hasta 3 teléfonos. Solo 10 dígitos, sin +1, sin espacios ni guiones. Con su etiqueta opcional (Main, Office, Emergency). El primero es el principal. - biz_email: en minúsculas. - biz_whatsapp_number: 11 dígitos con el 1 delante (ej. 15085550123). Si no hay WhatsApp, NO ENCONTRADO. - biz_areas: SOLO la zona de cobertura principal, en 1 o 2 filas (máximo 2), tal como el brief la nombra. Si el brief habla de un estado (ejemplo: New York), una fila con ese estado. Si nombra dos regiones o condados principales, una fila cada una. NUNCA listes aquí las ciudades individuales: este campo arma los títulos ("Roofing in New York") y los textos, y con 3 o más zonas el título pierde la zona. Las ciudades que el brief mencione van en la sección CIUDADES DETECTADAS (fase 5), no en Business Info. No agregues zonas que no estén en el brief. - biz_has_license: Sí o No. - biz_license_number: solo si biz_has_license es Sí. - biz_address: una sola línea, tal como viene en el documento, con formato "Calle, Ciudad, ST 00000". Si solo hay ciudad y estado, pon solo eso. - biz_has_hours: Sí o No. - biz_hours: una sola línea. Ejemplo: Monday to Sunday: 7:00 AM to 3:30 PM - biz_facebook_url, biz_instagram_url, biz_tiktok_url, biz_youtube_url: URL completa con https://. Si no hay, NO ENCONTRADO. - biz_has_owner: Sí o No. - biz_owner_name: solo si biz_has_owner es Sí. ANÁLISIS DE ZONAS (hazlo ANTES de decidir biz_areas) Los PDFs traen los textos que irán en el sitio. Lee TODOS los textos y anota cada estado, región, condado y ciudad que mencionan, con el nombre del PDF y la página. Decide biz_areas SOLO con lo que esos textos dicen. Si los textos solo nombran un estado (ejemplo: New York), biz_areas es ese estado, aunque en otro lugar aparezcan ciudades de otro estado. No uses conocimiento externo ni supongas: si un estado no aparece en los textos, no entra. Si los PDFs se contradicen (un PDF dice New York y otro dice Connecticut), pon la contradicción en DUDAS y usa lo que dicen los textos del sitio. ENTREGA EN ESTE ORDEN 0. ZONAS ENCONTRADAS EN LOS TEXTOS: una tabla con Zona | Tipo (estado, condado, ciudad) | Veces que aparece | Fuente (PDF y página) | Qué se hace (biz_areas, o CIUDADES DETECTADAS, o descartada por qué). Primero esta tabla, antes de los bloques. 1. BLOQUES PARA COPIAR, agrupados por pestaña del formulario de Business Info (1. Identidad de marca, 2. Contacto, 3. Redes sociales). Para cada campo: - una línea de texto con el nombre del campo (ejemplo: **biz_company_name**), fuera del bloque; - debajo, un bloque de código con SOLO el valor. Para biz_phones y biz_areas, un bloque por cada fila (indica "fila 1", "fila 2"...). Para el teléfono pon la etiqueta (Main, Office, Emergency) en su propio bloque aparte. Los campos de Sí/No (biz_has_license, biz_has_owner, biz_has_hours) NO llevan bloque: indícalos como "Activar" o "Dejar desactivado" en una línea. Los campos con NO ENCONTRADO NO llevan bloque: indícalo en una línea ("dejar vacío"). El orden de los campos es el de la pestaña: Identidad de marca (biz_company_name, biz_years_experience, biz_address, biz_mission, biz_vision, biz_has_license, biz_license_number, biz_has_owner, biz_owner_name, biz_has_hours, biz_hours), Contacto (biz_phones, biz_email, biz_whatsapp_number, biz_areas), Redes sociales (biz_facebook_url, biz_instagram_url, biz_tiktok_url, biz_youtube_url). 2. Una tabla de revisión con tres columnas: Campo | Valor | Fuente (nombre del PDF y página). Es solo para comprobar de dónde sale cada dato; no se copia de ahí. 3. Sección ARCHIVOS A SUBIR: lista de los logos y badges que aparecen en los documentos (logo principal, logo claro si existe, logos de licencias), con el nombre del archivo. 4. Sección DUDAS: conflictos entre documentos y datos que parecen incorrectos (teléfono con formato raro, email con error, dirección incompleta). 5. Sección FALTANTES: lista de los campos con NO ENCONTRADO que hay que pedir al cliente. 6. Sección CIUDADES DETECTADAS (para la fase 5): las ciudades, condados o zonas específicas que el brief nombra y que NO se cargaron en biz_areas. No se pegan en Business Info: se usan en la fase 5 para crear las áreas. Una por línea, con su estado (ejemplo: White Plains, NY). ```` --- ## PARTE B: Orden de los campos en WordPress La IA entrega la tabla en este orden, el mismo de Business Info. Se pega de arriba hacia abajo. | # | Pestaña del formulario | Campos (en este orden) | |---|---|---| | 1 | Identidad de marca | `biz_company_name`, `biz_years_experience`, `biz_address`, `biz_logo`, `biz_logo_light`, `biz_mission`, `biz_vision`, `biz_has_license`, `biz_license_number`, `biz_license_logos`, `biz_has_owner`, `biz_owner_name`, `biz_has_hours`, `biz_hours` | | 2 | Contacto | `biz_phones` (hasta 3 filas), `biz_email`, `biz_whatsapp_number`, `biz_areas` (una fila por área) | | 3 | Redes sociales | `biz_facebook_url`, `biz_instagram_url`, `biz_tiktok_url`, `biz_youtube_url` | **Qué NO entrega la IA** - Los logos como archivo: los sube el equipo a la Biblioteca de Medios y los elige en `biz_logo`, `biz_logo_light` y `biz_license_logos`. La IA solo lista cuáles son. - El formulario de contacto y su reCAPTCHA: no están en Business Info. Se configuran en la plantilla global de Bricks. --- ## PARTE C: Ejemplo de la entrega (datos ficticios) ### 1. Bloques para copiar (así se ve en el chat; cada bloque tiene su ícono de copiar) **Pestaña 1. Identidad de marca** **biz_company_name** ``` Northline Roofing LLC ``` **biz_years_experience** ``` 12 ``` **biz_address** ``` 100 Main St, Worcester, MA 01608 ``` **biz_mission**: dejar vacío (NO ENCONTRADO) **biz_has_license**: Activar **biz_license_number** ``` HIC.0000000 ``` **biz_has_owner**: dejar desactivado **biz_has_hours**: Activar **biz_hours** ``` Monday to Friday: 8:00 AM to 5:00 PM ``` **Pestaña 2. Contacto** **biz_phones, fila 1: número** ``` 5085550123 ``` **biz_phones, fila 1: etiqueta** ``` Main ``` **biz_email** ``` info@northlineroofing.example ``` **biz_areas, fila 1** ``` Massachusetts ``` *(y así con el resto de los campos)* ### 2. Tabla de revisión | Campo | Valor para pegar | Fuente | |---|---|---| | `biz_company_name` | Northline Roofing LLC | Brief.pdf, p. 1 | | `biz_years_experience` | 12 | Brief.pdf, p. 2 | | `biz_address` | 100 Main St, Worcester, MA 01608 | Brief.pdf, p. 1 | | `biz_mission` | NO ENCONTRADO | | | `biz_vision` | NO ENCONTRADO | | | `biz_has_license` | Sí | Brief.pdf, p. 2 | | `biz_license_number` | HIC.0000000 | Brief.pdf, p. 2 | | `biz_has_owner` | No | | | `biz_has_hours` | Sí | Brief.pdf, p. 2 | | `biz_hours` | Monday to Friday: 8:00 AM to 5:00 PM | Brief.pdf, p. 2 | | `biz_phones` fila 1 | 5085550123 · Main | Brief.pdf, p. 1 | | `biz_phones` fila 2 | 5085550177 · Emergency | Brief.pdf, p. 1 | | `biz_email` | info@northlineroofing.example | Brief.pdf, p. 1 | | `biz_whatsapp_number` | NO ENCONTRADO | | | `biz_areas` | Massachusetts | Brief.pdf, p. 3 | | `biz_facebook_url` | https://www.facebook.com/northlineroofing | Brief.pdf, p. 4 | | `biz_instagram_url` | NO ENCONTRADO | | | `biz_tiktok_url` | NO ENCONTRADO | | | `biz_youtube_url` | NO ENCONTRADO | | **ARCHIVOS A SUBIR:** `northline-logo.png` (principal), `northline-logo-white.png` (claro), `hic-badge.png` (licencia). **DUDAS:** el teléfono de la p. 1 y el de la p. 5 son distintos (5085550123 y 5085550199). Se usó el de la p. 1 (REVISAR). **FALTANTES:** misión, visión, WhatsApp, Instagram, TikTok, YouTube. **CIUDADES DETECTADAS (fase 5, no van en Business Info):** Worcester, MA · Framingham, MA · Natick, MA. --- ## PARTE D: Cómo se usa, paso a paso 1. Abre un chat nuevo del proyecto en la IA y adjunta todos los PDFs del cliente. 2. Pega el prompt de la Parte A. 3. Revisa DUDAS y FALTANTES. Los faltantes se piden al comercial o al cliente. 4. Sube los logos de ARCHIVOS A SUBIR a la Biblioteca de Medios. 5. Abre **Business Info** y, para cada campo, pulsa el **ícono de copiar** del bloque de la IA y pega en el campo. **No selecciones el texto a mano** ni lo escribas: el ícono copia exactamente el valor, sin espacios de más. 6. Pulsa **Guardar**. 7. Comprueba con el Header y el Footer: teléfono, email, dirección y redes deben verse tal como los pegaste. **Si un valor no queda bien:** pídele a la IA "entrégame de nuevo el bloque de {campo} sin espacios al inicio ni al final". Nunca corrijas a mano un dato dentro del bloque sin comprobar la fuente. **Regla de calidad:** un campo con NO ENCONTRADO se deja vacío en WordPress. Así el sitio no muestra el dato ni su ícono. Nunca se rellena con un dato aproximado. **Siguiente paso previsto:** esta plantilla pasa a ser la Fase 1 del prompt maestro nuevo. === FIN DE Plantilla_Business_Info_Copiar_y_Pegar.md === === Esquema_JSON_Wizard_Corp_v1.md === (Fases 5 y 12: esquema del JSON del wizard) # Esquema del JSON de CM Wizard Corp (v1) Cada tipo de proyecto tiene su propio wizard: **CM Wizard One Page** (`cm-wizard-onepage.zip`) y **CM Wizard Corporativa** (`cm-wizard-corporativa.zip`). Son plugins distintos del CM Wizard de los sitios SEO, con el mismo esquema de JSON, y nunca van instalados en el mismo WordPress. ## 1. Estructura ```json { "schema": 1, "site_type": "onepage", "items": [ { "action": "add", "type": "service", "id": "chimney-repair", "title": "Chimney Repair", "fields": { ... } } ] } ``` - `schema`: siempre 1. - `site_type`: obligatorio. `"onepage"` o `"corporate"`. Debe ser igual al tipo del wizard instalado (el tipo viene fijo en el plugin, no hay nada que configurar). Un JSON de otro tipo da error y no cambia nada. - `items`: lista de servicios y, solo en corporate, entradas de blog. ## 2. Qué aplica el wizard según el tipo | | `onepage` | `corporate` | |---|---|---| | Items permitidos | `service` | `service` y `post` | | Áreas como página | No existen (error si vienen en el JSON) | No existen | | Blog | No existe (error) | Sí | Cada tipo tiene su propio WordPress base, con solo las páginas que usa. El wizard no crea, publica ni esconde páginas. ## 3. Las áreas No van en el JSON. Se escriben como texto en Business Info (`biz_areas`), con la zona principal en la primera fila, y las secciones imprimen esa lista sin enlaces. ## 4. Servicio (`type: "service"`) Campos obligatorios: `svc_short_description` y `svc_intro`. Opcionales: `svc_icon`, `svc_includes`, `svc_benefits`, `svc_status`, `svc_menu_show`. No se piden FAQ, meta title, meta description ni focus keyword, porque el servicio no tiene página propia. Las reglas de texto (inglés americano, marcadores `{company}`, `{years}`, `{phone}`, `{areas}`, sin datos escritos a mano, una sola línea en los campos de línea) son las mismas del wizard SEO. ## 5. Entrada de blog (`type: "post"`, solo corporate) Igual que en el wizard SEO: título, `content` y, si se quiere, categoría e imagen. ## 6. Acciones `add`, `update`, `rename`, `retire` y `reorder`, con el mismo comportamiento que el wizard SEO. Como los servicios no tienen URL propia, no se crean redirecciones al renombrarlos o retirarlos. ## 7. Imágenes Los servicios reciben `image-test.webp` como imagen de prueba en sus campos de imagen. En Corporativa, la galería de cada servicio (`svc_gallery`, máximo 6) también recibe la imagen de prueba, y se llena con `images.gallery` cuando se tengan las fotos reales. En One Page no existe galería por servicio. ## 8. Ejemplos que validan Cada plugin trae su ejemplo que valida: `Ejemplo_JSON_OnePage.json` y `Ejemplo_JSON_Corporativa.json`. === FIN DE Esquema_JSON_Wizard_Corp_v1.md === === Ejemplo_JSON_Corporativa.json === (Fase 5: ejemplo de contenido.json que valida) ```json { "schema": 1, "site_type": "corporate", "items": [ { "action": "add", "type": "service", "id": "chimney-repair", "title": "Chimney Repair", "position": 1, "fields": { "svc_short_description": "Brick and mortar chimney repair for homes and businesses in {areas}.", "svc_icon": "house-chimney", "svc_intro": "{company} has repaired chimneys for {years} years. We find the cause of the damage first, then fix it so it stays fixed.\n\nCall {phone} to schedule a free estimate.", "svc_includes": [ { "text": "Full chimney inspection" }, { "text": "Tuckpointing and brick replacement" }, { "text": "Crown and flashing repair" } ], "svc_benefits": [ { "title": "Stops water damage", "text": "We seal the entry points that let moisture into your home." }, { "title": "Matches your brick", "text": "We match brick and mortar so the repair blends in." } ], "svc_status": "ready" } }, { "action": "add", "type": "service", "id": "masonry-restoration", "title": "Masonry Restoration", "position": 2, "fields": { "svc_short_description": "Careful masonry restoration for homes and businesses in {areas}.", "svc_icon": "trowel-bricks", "svc_intro": "{company} restores brick, stone and block so it looks right and lasts.\n\nCall {phone} to schedule a free estimate.", "svc_includes": [ { "text": "Brick and stone repair" }, { "text": "Repointing and tuckpointing" }, { "text": "Cleaning and sealing" } ], "svc_benefits": [ { "title": "Protects the structure", "text": "Sound masonry keeps water out and walls strong." }, { "title": "Better curb appeal", "text": "Matched materials make repairs hard to spot." } ], "svc_status": "ready" } }, { "action": "add", "type": "post", "id": "chimney-maintenance-tips", "title": "5 Chimney Maintenance Tips Before Winter", "date": "2026-10-01", "category": "Chimney Care", "excerpt": "Simple checks that prevent costly chimney repairs.", "content": "

Check your chimney crown and mortar each fall. Small cracks grow quickly in freezing weather.

Call {phone} if you see loose brick or water stains.

", "status": "publish" } ] } ``` === FIN DE Ejemplo_JSON_Corporativa.json === === Guia_Paso_a_Paso_Header_Settings_v3.1.md === (Fase 6: contrato del header (Parte F, con los cambios del Contrato Corporativa)) # Guía paso a paso: Header Settings (ACF PRO) — v3.1 **Objetivo:** crear la página de opciones que controla el header sin tocar código: altura, colores, Call Now, botón principal, topbar opcional y modo transparente. El código del header (generado por la IA y pegado en Bricks) lee estos campos. Los datos del negocio salen de Business Info. **Dónde se hace:** en el WordPress base, nunca en un proyecto de cliente. **Requisitos previos:** Business Info creado y el kit de variables de Bricks cargado, incluidas las 5 variables nuevas de `Reglas_Prompt_Actual_vs_Sistema_Nuevo.md` (`z-dropdown`, `z-header`, `z-modal`, `container-max`, `container-padding`). **Footer:** va después, con su propia guía. > **Regla de idioma:** todo lo que se escribe en WordPress va en inglés; las instrucciones de ayuda para el equipo quedan en español. > **Prefijos:** `hdr_` para todo el header. Los campos del estilo transparente llevan `hdr_t_`. Los sub-campos de repetidores no llevan prefijo. --- ## Cambios respecto a v2 (por el prompt actual) | Cambio | Motivo | |---|---| | Nuevo `hdr_call_style` | El prompt define dos variantes del Call Now: compacta y completa | | `hdr_call_color` y `hdr_t_call_color` ahora controlan **solo el ícono** | La etiqueta y el número toman el color del texto del menú | | Eliminados `hdr_topbar_hide_scroll` y `hdr_topbar_mobile` | El topbar es fijo en escritorio y tablet, y se oculta en celular. Sus datos pasan al menú móvil. Menos movimiento, menos riesgo de parpadeo | | Eliminado `hdr_dropdown_mode` | El prompt define dos megamenús fijos: Services y Service Areas | | Tipos del menú: `page`, `services`, `areas` | El tipo `blog` sobra: es un enlace de página normal | | Parte F (contrato) reescrita | Incluye las reglas del prompt actual | **Si ya creaste campos con v2:** borra `hdr_topbar_hide_scroll`, `hdr_topbar_mobile` y `hdr_dropdown_mode`; agrega `hdr_call_style`; cambia las etiquetas de `hdr_call_color` y `hdr_t_call_color`. Si creaste `hdr_topbar_badges` o `hdr_menu_items`, bórralos. **Total: 7 pestañas y 29 campos** (el menú ya no tiene campos: está fijo en el código y se llena solo; el logo claro pasó a Business Info como `biz_logo_light`; la v3.1 no agrega campos al header: los datos del menú viven en cada servicio, ver Parte C2). ## Novedades de la v3.1 **Menú simplificado:** se eliminó la pestaña Menu y el repetidor `hdr_menu_items`. El menú es siempre Home, About Us, Services, Service Areas, Blog y Contact, lo arma el código y se llena solo. Si ya creaste `hdr_menu_items`, bórralo. | Cambio | Motivo | |---|---| | Parte C2 nueva: preparar el servicio para el menú | Orden, ícono, imagen y descripción del megamenú se editan **en el servicio**, sin regenerar código | | Regla 7 reforzada: el ícono también es condicional | Que no quede un ícono suelto cuando falta el dato | | Parte F7 nueva: megamenú de diseño libre con datos fijos | Cada proyecto puede usar ícono, imagen o descripción, pero siempre con la misma fuente de datos | | Marca visible de imagen de prueba en el megamenú | El equipo ve qué imágenes faltan reemplazar | | Pruebas y checklist ampliados | Cubren lo anterior | --- ## Cómo se comporta cada modo | | Modo **Solid** | Modo **Transparent** | |---|---|---| | Posición del Hero | **Debajo** del header | **Detrás** del header (su texto empieza debajo) | | Header arriba de todo | Fondo y colores del estilo Solid | Sin fondo; colores del estilo Transparent | | Después del primer scroll | Igual, con sombra | Pasa a fondo y colores del estilo Solid, con sombra | | Altura | La del estilo Solid, siempre fija | La del estilo Transparent arriba; la del Solid después | | Hero de Home | Header + Hero suman 100vh | El Hero ocupa 100vh y el header va encima | El estilo "después del scroll" del modo transparente **reutiliza el estilo Solid**: menos campos y contraste garantizado. --- ## PARTE A: Crear la página de opciones ### Paso 1. Header Settings **ACF → Páginas de opciones → Añadir nueva** | Ajuste | Valor | |---|---| | Título de la página | `Header Settings` | | Slug del menú | `header-settings` | | Página superior | `Business info` (si aparece en el desplegable; si no, déjala como página principal) | | Capacidad | Por defecto (`edit_posts`) | --- ## PARTE B: Lista de colores permitidos Todos los campos de color son **Selección** con estas 10 opciones. En **Opciones** se pegan igual en cada uno (una por línea, formato `valor : Etiqueta`): ``` primary : Primary primary-d-5 : Primary dark primary-l-10 : Primary lightest secondary : Secondary secondary-l-10 : Secondary lightest cta : CTA cta-d-3 : CTA dark color-text : Text gray white : White black : Black ``` **¿Se pueden agregar más colores? Sí.** Para agregar uno: 1. La variable debe existir en Bricks (el kit trae `primary`, `secondary` y `cta`, cada uno con `-l-1` a `-l-10`, `-d-1` a `-d-10` y `-t-1` a `-t-10`). 2. En ACF, abre el campo de color y agrega una línea en **Opciones**: `nombre-de-la-variable : Etiqueta`, sin `--`. Ejemplo: `primary-d-8 : Primary darkest`. 3. Repite en los campos de color donde lo quieras (son 15). Si solo lo necesitas en uno, agrégalo solo ahí. 4. Guarda el grupo y anota el color nuevo en esta lista. El valor guardado es el **nombre de la variable de Bricks**. El código lo convierte en `var(--valor)`. Todos van con **Formato de retorno: Valor**. > **Contraste:** los valores por defecto de abajo son seguros (blanco sobre `primary` o `cta`). Como los 3 colores de marca cambian por proyecto, el equipo debe revisar el contraste del Call Now y del botón en cada sitio. --- ## PARTE C: Crear el grupo de campos `info header` ### Paso 2. Crear el grupo **ACF → Grupos de campos → Añadir nuevo**. Título: `info header` | Ajuste | Valor | |---|---| | Reglas de ubicación | Página de opciones **es igual a** Header Settings | | Estilo | Estándar | | Posición | Alta | | Ubicación de la etiqueta | Alineada arriba | | Ubicación de las instrucciones | Debajo de las etiquetas | ### Paso 3. Cómo se llena cada campo (recordatorio) | Qué | Dónde | |---|---| | Etiqueta, Nombre, Tipo, opciones, valor por defecto, mínimo/máximo | Pestaña **General** del campo | | Instrucciones | Pestaña **Presentación** | | "Mostrar solo si..." | Pestaña **Lógica condicional**: activar → elegir el campo → **es igual a** → valor | Escribe primero la Etiqueta y luego corrige el **Nombre del campo**. Guarda cambios al terminar cada pestaña. En los **Verdadero / Falso**, activa "Mostrar interfaz con estilo". ### Paso 4. Pestañas y campos (en este orden) **Pestaña `1. Mode`** | Label | Nombre | Tipo | Ajustes | Instrucciones (pegar) | |---|---|---|---|---| | Header mode | `hdr_mode` | Selección | Opciones: `solid : Solid` y `transparent : Transparent` · Defecto `solid` · Retorno: Valor | Solid: el Hero queda debajo del header. Transparent: el Hero queda detrás del header y, al primer scroll, el header se vuelve sólido. | | Transparent on | `hdr_transparent_scope` | Selección | Opciones: `home : Home page only` y `all : Entire site` · Defecto `home` · Lógica condicional: `hdr_mode` es igual a `transparent` | Home page only: solo la portada es transparente; el resto del sitio usa el header sólido. Entire site: todas las páginas con Hero son transparentes (el sitio debe empezar cada página con un Hero apto). Las páginas 404 y de búsqueda siempre usan el header sólido. | **Pestaña `2. Solid style`** Instrucción de la pestaña (en el primer campo): este estilo también se usa en el header transparente después del primer scroll. | Label | Nombre | Tipo | Ajustes | Instrucciones (pegar) | |---|---|---|---|---| | Height desktop | `hdr_height_desktop` | Número | Mín. **56** · Máx. **120** · Defecto **80** · Añadido: `px` | Altura de la barra principal en computador, sin contar el topbar. | | Height mobile | `hdr_height_mobile` | Número | Mín. **48** · Máx. **90** · Defecto **64** · Añadido: `px` | Altura de la barra principal en celular y tablet (menú hamburguesa). | | Background | `hdr_bg_color` | Selección | Lista de colores · Defecto `white` | Color de fondo del header. | | Menu text color | `hdr_menu_color` | Selección | Lista de colores · Defecto `color-text` | Color de los enlaces del menú y del texto del Call Now. | | Call Now background | `hdr_call_bg` | Selección | Lista de colores · Defecto `primary` | Color del círculo del Call Now. | | Call Now icon | `hdr_call_color` | Selección | Lista de colores · Defecto `white` | Color del ícono dentro del círculo. | | Button background | `hdr_btn_bg` | Selección | Lista de colores · Defecto `cta` | Color de fondo del botón principal. | | Button text | `hdr_btn_color` | Selección | Lista de colores · Defecto `white` | Color del texto del botón principal. | **Pestaña `3. Transparent style`** Lógica condicional de la **pestaña**: `hdr_mode` es igual a `transparent`. Si tu versión de ACF no oculta los campos de dentro, aplica la misma lógica campo por campo. Instrucción de la pestaña (en el primer campo): colores del header mientras está arriba, sobre el Hero. Después del primer scroll se usa el estilo de la pestaña 2. | Label | Nombre | Tipo | Ajustes | Instrucciones (pegar) | |---|---|---|---|---| | Height desktop | `hdr_t_height_desktop` | Número | Mín. **56** · Máx. **120** · Defecto **90** · Añadido: `px` | Altura de la barra principal arriba, en computador. | | Height mobile | `hdr_t_height_mobile` | Número | Mín. **48** · Máx. **90** · Defecto **64** · Añadido: `px` | Altura de la barra principal arriba, en celular y tablet. | | Menu text color | `hdr_t_menu_color` | Selección | Lista de colores · Defecto `white` | Color de los enlaces del menú y del texto del Call Now sobre el Hero. | | Call Now background | `hdr_t_call_bg` | Selección | Lista de colores · Defecto `white` | Color del círculo del Call Now sobre el Hero. | | Call Now icon | `hdr_t_call_color` | Selección | Lista de colores · Defecto `primary` | Color del ícono dentro del círculo. | | Button background | `hdr_t_btn_bg` | Selección | Lista de colores · Defecto `cta` | Fondo del botón principal sobre el Hero. | | Button text | `hdr_t_btn_color` | Selección | Lista de colores · Defecto `white` | Texto del botón principal sobre el Hero. | **Pestaña `4. Logo`** | Label | Nombre | Tipo | Ajustes | Instrucciones (pegar) | |---|---|---|---|---| | Logo height desktop | `hdr_logo_height_desktop` | Número | Mín. **24** · Máx. **100** · Defecto **48** · Añadido: `px` | Altura del logo en computador. | | Logo height mobile | `hdr_logo_height_mobile` | Número | Mín. **20** · Máx. **70** · Defecto **36** · Añadido: `px` | Altura del logo en celular y tablet. | Los logos salen de Business Info: `biz_logo` (normal) y `biz_logo_light` (versión clara, para el header transparente y fondos oscuros). **Crea `biz_logo_light` en Business Info** (Imagen, retorno ID, opcional). Si está vacío, el header transparente usa `biz_logo`. **Pestaña `5. Call Now & button`** | Label | Nombre | Tipo | Ajustes | Instrucciones (pegar) | |---|---|---|---|---| | Call Now style | `hdr_call_style` | Selección | Opciones: `full : Icon, label and number` y `compact : Icon only` · Defecto `full` | Solo para computador. Completo: círculo con ícono, etiqueta y número. Compacto: solo el círculo con el ícono. En celular siempre se muestra el ícono con la etiqueta, sin número. | | Call Now text | `hdr_call_text` | Texto | Defecto `Call Now` | Etiqueta del botón de llamada. Se muestra en mayúsculas, en computador y en celular. | | Call Now icon | `hdr_call_icon` | Texto | Defecto `phone` | Solo el nombre del ícono de Font Awesome, sin prefijo. Ejemplo: phone | | Button text | `hdr_btn_text` | Texto | Defecto `Get Free Estimate` | Texto del botón principal. Se oculta siempre en celular. Si lo dejas vacío, el botón no se muestra. | | Button link | `hdr_btn_link` | Enlace | Retorno: **Matriz de enlace** | A dónde lleva el botón. Normalmente la página de contacto. | **Pestaña `6. Topbar`** | Label | Nombre | Tipo | Ajustes | Instrucciones (pegar) | |---|---|---|---|---| | Show topbar | `hdr_topbar_show` | Verdadero / Falso | Defecto: **Sí** | Activa la barra superior. Si está apagada no se muestra y el Hero se ajusta solo. En celular la barra se oculta y sus datos pasan al menú móvil. | | Topbar background | `hdr_topbar_bg` | Selección | Lista de colores · Defecto `primary-d-5` · Lógica condicional: igual que arriba | Color de fondo de la barra superior. | | Topbar text color | `hdr_topbar_color` | Selección | Lista de colores · Defecto `white` · Lógica condicional: igual que arriba | Color del texto y de los íconos. | **Pestaña `7. Mobile`** | Label | Nombre | Tipo | Ajustes | Instrucciones (pegar) | |---|---|---|---|---| | Mobile menu background | `hdr_mobile_bg` | Selección | Lista de colores · Defecto `primary` | Fondo del menú móvil desplegado. | | Mobile menu text | `hdr_mobile_text` | Selección | Lista de colores · Defecto `white` | Color del texto del menú móvil. | ### Paso 5. Guardar y revisar nombres **Guardar cambios** y comparar la columna **Nombre** con las tablas, letra por letra. Un nombre mal escrito rompe el código del header. --- ## PARTE C2: Preparar el servicio para el menú El megamenú no tiene lista propia: lee los servicios y áreas publicados. Así, crear, renombrar, reordenar o despublicar un servicio actualiza el menú sin tocar el header ni regenerar código. ### Qué dato sale de dónde | Dato del megamenú | Dónde se edita | Campo | |---|---|---| | Nombre | Servicio → Título | Nativo | | Enlace | Automático | `get_permalink()` | | **Orden** | Servicio → cuadro Atributos de página → Orden (número) | `menu_order` nativo | | **Ícono** | Servicio → pestaña `1. Identity` | `svc_icon` (ya existe) | | **Imagen** | Servicio → Imagen destacada | Nativo | | Descripción corta | Servicio → pestaña `1. Identity` | `svc_short_description` (ya existe) | | Mostrar en el menú | Servicio → pestaña `1. Identity` | `svc_menu_show` (**nuevo**) | ### Paso A. Un campo nuevo en `Info service` **ACF → Grupos de campos → info service → pestaña `1. Identity`**, debajo de `svc_icon`: | Label | Nombre | Tipo | Ajustes | Instrucciones (pegar) | |---|---|---|---|---| | Show in menu | `svc_menu_show` | Verdadero / Falso | Mostrar interfaz con estilo · Defecto: **Sí** | Apágalo para ocultar este servicio del menú sin despublicarlo. La página sigue existiendo. | ### Paso B. Mejorar las instrucciones de `svc_icon` Pestaña **Presentación** del campo `svc_icon`, reemplaza por: > Solo el nombre del ícono de Font Awesome, sin prefijo. Ejemplo: house-chimney. Para cambiarlo, busca el servicio en fontawesome.com/icons, abre el ícono y copia solo el nombre. Los íconos Pro están permitidos. Si el ícono no aparece en el sitio, revisa que el nombre esté bien escrito. Se cambia el ícono escribiendo otro nombre y guardando el servicio. No hay que tocar el header. > **Font Awesome Pro:** el sitio usa el kit Pro, así que se pueden usar todos los íconos de pago. El estilo (regular, light, thin, duotone o solid) lo define el código del header, un solo estilo por proyecto, para que todos los íconos se vean coherentes. El nombre guardado en el campo no incluye el estilo. ### Paso C. Ordenar con un número `service` ya soporta **Atributos de página**, que trae un campo numérico nativo: **Orden**. Es el número que define la posición en el menú. **No hace falta crear otro campo.** 1. Abre el servicio. En la barra lateral, en el cuadro **Atributos de página**, está el campo **Orden**. 2. Menor número = aparece primero. Usa saltos de 10 (10, 20, 30...) para poder intercalar uno nuevo sin renumerar. 3. En la lista de Services también se cambia con **Edición rápida → Orden**. 4. El wizard asigna estos números al crear los servicios, según el orden del JSON. > **Opcional:** el plugin *Simple Page Ordering* permite además arrastrar las filas en la lista. No es necesario. --- ### Paso D. Imagen de prueba visible El wizard asigna `image-test.webp` como imagen destacada cuando el JSON no trae una. El megamenú la usa, así que el equipo sabe que falta la foto real por tres vías: 1. El código del megamenú marca esa imagen con un borde de color y una etiqueta "Replace image", **solo para usuarios con sesión de editor o administrador**. El visitante no ve nada. 2. El reporte final del wizard lista las páginas que aún usan la imagen de prueba. 3. El checklist de QA bloquea pasar a `ready` mientras haya una. --- ## PARTE D: Guardar los valores por defecto ACF no graba los valores por defecto de una página de opciones hasta que se pulsa **Guardar**. 1. Abre **Header Settings**, revisa que todo esté en sus valores por defecto. 2. Pulsa **Guardar**. Los valores quedan en la base de datos, así que **viajan con el clon de WPVivid**. --- ## PARTE E: Lo que NO es un campo (fijo en el código) | Elemento | Valor fijo | |---|---| | Topbar oculto | Desde 767 px hacia abajo | | Menú hamburguesa y megamenú desactivado | Desde 1023 px hacia abajo | | Estructura del menú | Home, About Us, Services, Service Areas, Blog, Contact (los ítems sin contenido no se imprimen) | | Tamaño del texto del menú | `var(--text-m)` | | Tamaño del texto del topbar | `var(--text-s)` | | Efecto hover del menú | Subrayado con el color del texto, sin cambiar de color | | Link activo | Subrayado permanente, sin cambiar el peso de la letra | | Sombra del header después del scroll | `var(--shadow-s)` | | Transición | `var(--transition)` | | Capa (z-index) | `var(--z-header)` | | Altura del topbar | Fija en el código | --- ## PARTE F: Contrato para la IA (header) Estas reglas se pegan en el prompt maestro. Son obligatorias. Vienen del prompt actual, adaptadas al sistema nuevo (ver `Reglas_Prompt_Actual_vs_Sistema_Nuevo.md`). ### F1. Datos y estilos 1. **Solo estos campos**, leídos con `get_field('nombre', 'option')`. Nunca se inventan campos. 2. **Los datos del negocio salen de Business Info con PHP**, nunca escritos a mano ni con `window.SITE` ni atributos `data-site`. Teléfono, email, dirección, redes y logo se leen de los campos `biz_`. 3. **Todo con variables de Bricks.** Colores, `--text-*`, `--space-*`, `--radius-*`, `--shadow-*`, `--transition`, `--z-*`, `--container-*`. Nada de hex, `px`, `rem` ni `z-index` sueltos. Excepciones: las alturas que vienen de los campos numéricos, `50%` para círculos y la compensación de la barra de administración. 4. **Valor de respaldo en todo.** `var(--primary, #253C6D)`. Si un campo está vacío o la página de opciones nunca se guardó, se usa el valor por defecto de las tablas. 5. **Los selectores de color se validan** contra las opciones del propio campo (`get_field_object('nombre', 'option')['choices']`), no contra una lista escrita en el código. Así, agregar un color en ACF no exige tocar código. Un valor que no esté en las opciones usa el valor por defecto. 6. **Todo lo que se imprime va escapado** (`esc_html`, `esc_url`, `esc_attr`). 7. **Todo es condicional por campo vacío o apagado, ícono incluido.** Cada elemento y su ícono van dentro de la misma condición `if ( valor )`. Si el topbar está apagado, **no se imprime su HTML**. Sin teléfono no hay Call Now ni su ícono. Una red social sin URL no se muestra. Sin `svc_icon` no hay hueco de ícono en el menú. Un wrapper vacío tampoco se imprime. 8. **Prohibido:** `href="#"`, enlaces inventados, mostrar el dominio del sitio como texto, guion largo (—) y la palabra "across" en cualquier texto. 9. **Sin regex con backslash** (`\d`, `\s`, `\w`...) en JavaScript ni en PHP: Bricks los borra al guardar. Para quitar caracteres no numéricos del teléfono en PHP usa `preg_replace('/[^0-9]/', '', $valor)`. ### F2. Estructura y nombres (Bricks) 10. **El bloque BEM se llama `.site-header`**, nunca `.header` (choca con la clase interna de Bricks y rompe el header). Elementos: `.site-header__topbar`, `.site-header__main`, `.site-header__logo`, `.site-header__nav`, `.site-header__link`, `.site-header__mega`, `.site-header__phone`, `.site-header__cta`, `.site-header__toggle`. 11. **Dentro de `