# COMPENDIO SKILL ANCLORA - COMPLETO (v3 + v4 + Guía + Textos Legales) **Fecha:** 24 Enero 2026 --- ## Contenido de SKILL_MASTER_v4.0.md # ANCLORA SKILL MASTER v4.0 ## Sistema Completo de Desarrollo para Anclora Private Estates y Ecosistema --- **Versión:** 4.0.0 **Fecha:** 24 Enero 2026 **Paradigma:** Spec-Driven Development (SDD) **Alcance:** Web Principal + Aplicaciones Ecosistema + Sistema Legal **Coherencia:** Brand Kit Universal Obligatorio + Compliance Legal --- # TABLA DE CONTENIDOS ## PARTE I: BRAND KIT UNIVERSAL ANCLORA 1. [Identidad Visual Corporativa](#1-identidad-visual-corporativa) 2. [Sistema de Diseño](#2-sistema-de-diseño) 3. [Componentes Base Reutilizables](#3-componentes-base-reutilizables) - 3.1 Button Component - 3.2 Card Component - 3.3 Header Component - 3.4 Footer Component - **3.5 Sistema Legal del Footer** ⭐ NUEVO 4. **[Textos Legales Obligatorios](#4-textos-legales-obligatorios)** ⭐ NUEVO ## PARTE II: SKILL WEB PRINCIPAL 5. [Arquitectura Web Corporativa](#5-arquitectura-web-corporativa) 6. [Estructura de Directorios Web Principal](#6-estructura-de-directorios-web-principal) 7. [Archivos Críticos Web Principal](#7-archivos-criticos-web-principal) ## PARTE III: SKILL APPS ECOSISTEMA 8. [Arquitectura Apps Ecosistema](#8-arquitectura-apps-ecosistema) 9. [Tipos de Aplicaciones](#9-tipos-de-aplicaciones) 10. [Estructura Apps Landing Pages](#10-estructura-apps-landing-pages) ## PARTE IV: SISTEMA OPERATIVO 11. [Onboarding Adaptativo](#11-onboarding-adaptativo) 12. [Constitution Template](#12-constitution-template) 13. [Sistema QA\/KPIs](#13-sistema-qa-kpis) 14. [Instrucciones para Anti-Gravity](#14-instrucciones-para-anti-gravity) --- # PARTE I: BRAND KIT UNIVERSAL ANCLORA ## 1. IDENTIDAD VISUAL CORPORATIVA ### 1.1 Paleta de Colores Anclora (INNEGOCIABLE) ```css \/* PALETA PRIMARIA - Usar en TODAS las aplicaciones del ecosistema *\/ :root { \/* Oro Anclora - Color Principal *\/ --anclora-gold: #D4AF37; --anclora-gold-light: #E6C96E; --anclora-gold-dark: #B9915F; --anclora-gold-10: rgba(212, 175, 55, 0.1); --anclora-gold-20: rgba(212, 175, 55, 0.2); \/* Navy - Color Secundario *\/ --anclora-navy: #2C3E50; --anclora-navy-light: #34495E; --anclora-navy-dark: #1A252F; \/* Bronce - Acento Mediterráneo *\/ --anclora-bronze: #B9915F; --anclora-bronze-light: #C9A578; --anclora-bronze-dark: #9A7A4F; \/* Neutros *\/ --anclora-cream: #F5F5F0; --anclora-stone: #EAEAE5; --anclora-white: #FFFFFF; --anclora-black: #1A1A1A; \/* Gradientes Signature *\/ --gold-gradient: linear-gradient(135deg, #D4AF37 0%, #E6C96E 100%); --navy-gradient: linear-gradient(135deg, #2C3E50 0%, #1A252F 100%); --sunset-gradient: linear-gradient(135deg, #D4AF37 0%, #B9915F 50%, #2C3E50 100%); } ``` **REGLAS DE USO:** | Elemento | Color Obligatorio | Ejemplo | |----------|-------------------|---------| | CTAs Principales | `--anclora-gold` | Botones "Contactar", "Ver Propiedades" | | Headers\/Footers | `--anclora-navy` | Navegación principal, pie de página | | Hover States | `--anclora-gold-light` | Al pasar sobre links, tarjetas | | Backgrounds | `--anclora-cream` | Fondo general de secciones | | Textos Principales | `--anclora-black` | Cuerpo de texto, títulos | | Acentos Cálidos | `--anclora-bronze` | Badges, iconos destacados | ### 1.2 Tipografía Universal ```typescript \/\/ CONFIGURACIÓN OBLIGATORIA EN TODAS LAS APPS const ancloraFonts = { \/\/ Títulos y Headers (Serif Elegante) heading: { family: 'Playfair Display', weights: [400, 600, 700], usage: 'H1, H2, H3, títulos de propiedades, hero sections', }, \/\/ Cuerpo y UI (Sans-Serif Moderna) body: { family: 'Montserrat', weights: [300, 400, 500, 600, 700], usage: 'Párrafos, navegación, botones, formularios', }, }; ``` **ESCALA TIPOGRÁFICA:** ```css \/* Aplicar en tailwind.config.ts de TODAS las apps *\/ .text-display { font-family: var(--font-playfair); font-size: 4.5rem; \/* 72px *\/ font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .text-h1 { font-family: var(--font-playfair); font-size: 3.5rem; \/* 56px *\/ font-weight: 600; line-height: 1.2; } .text-h2 { font-family: var(--font-playfair); font-size: 2.5rem; \/* 40px *\/ font-weight: 600; line-height: 1.3; } .text-h3 { font-family: var(--font-playfair); font-size: 2rem; \/* 32px *\/ font-weight: 600; line-height: 1.4; } .text-body-lg { font-family: var(--font-montserrat); font-size: 1.125rem; \/* 18px *\/ font-weight: 400; line-height: 1.7; } .text-body { font-family: var(--font-montserrat); font-size: 1rem; \/* 16px *\/ font-weight: 400; line-height: 1.6; } .text-small { font-family: var(--font-montserrat); font-size: 0.875rem; \/* 14px *\/ font-weight: 400; line-height: 1.5; } .text-caption { font-family: var(--font-montserrat); font-size: 0.75rem; \/* 12px *\/ font-weight: 500; line-height: 1.4; letter-spacing: 0.05em; text-transform: uppercase; } ``` ### 1.3 Logos y Assets Corporativos **VARIANTES DE LOGO OBLIGATORIAS:** ``` public\/assets\/brand\/ ├── logo-anclora-full-gold.svg # Logo completo dorado (para fondos oscuros) ├── logo-anclora-full-navy.svg # Logo completo navy (para fondos claros) ├── logo-anclora-icon-gold.svg # Isotipo dorado ├── logo-anclora-icon-navy.svg # Isotipo navy ├── logo-anclora-nexus-group.svg # Logo grupo (para footers) ├── badges\/ │ ├── badge-gdpr.svg # Badge GDPR compliance │ ├── badge-iso-9001.svg # Badge ISO 9001:2015 │ └── badge-eu-reg.svg # Badge EU Registration └── favicon\/ ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png └── apple-touch-icon.png ``` **REGLAS DE USO:** - ✅ Usar `logo-anclora-full-gold.svg` en headers con fondo navy - ✅ Usar `logo-anclora-full-navy.svg` en headers con fondo cream\/white - ✅ Altura mínima de logo: 40px (desktop), 32px (mobile) - ❌ NUNCA distorsionar proporciones - ❌ NUNCA cambiar colores del logo --- ## 3. COMPONENTES BASE REUTILIZABLES [... contenido anterior del documento ...] ### 3.5 Sistema Legal del Footer **CRÍTICO:** Este sistema legal es OBLIGATORIO en TODAS las aplicaciones del ecosistema Anclora (web principal, landings de proyectos, landings de ubicación, etc.). #### 3.5.1 Estructura del Footer Legal ```tsx \/\/ components\/layout\/Footer.tsx export function Footer() { const t = useTranslations('footer'); return (

🍪 Uso de Cookies <\/h3>
Utilizamos cookies propias y de terceros para mejorar tu experiencia, analizar el tráfico y personalizar el contenido. Puedes aceptar todas las cookies, configurarlas o rechazar las no esenciales.{' '} Más información <\/a> <\/p> <\/div>

Cookies de Marketing <\/h4>
Meta Pixel - Para mostrarte anuncios relevantes en redes sociales. <\/p> <\/div>
setPreferences({...preferences, marketing: e.target.checked})} className="w-5 h-5" \/> <\/div> <\/div> <\/div>

🍪 Uso de Cookies <\/h3> Utilizamos cookies propias y de terceros para mejorar tu experiencia, analizar el tráfico y personalizar el contenido. Puedes aceptar todas las cookies, configurarlas o rechazar las no esenciales.{' '} Más información <\/a> <\/p> <\/div>

Cookies de Marketing <\/h4> Meta Pixel - Para mostrarte anuncios relevantes en redes sociales. <\/p> <\/div> setPreferences({...preferences, marketing: e.target.checked})} className="w-5 h-5" \/> <\/div> <\/div> <\/div>

🍪 Uso de Cookies <\/h3>
Utilizamos cookies propias y de terceros para mejorar tu experiencia, analizar el tráfico y personalizar el contenido. Puedes aceptar todas las cookies, configurarlas o rechazar las no esenciales.{' '} Más información <\/a> <\/p> <\/div>

Cookies de Marketing <\/h4>
Meta Pixel - Para mostrarte anuncios relevantes en redes sociales. <\/p> <\/div>
setPreferences({...preferences, marketing: e.target.checked})} className="w-5 h-5" \/> <\/div> <\/div> <\/div>

creador_apps_luxury