/* ============================================================ FH CONSTRUCCIÓN — DESIGN SYSTEM Un sistema, cuatro temas. Uso: → toda la página se retematiza. Los componentes NUNCA usan un hex directo. Solo var(--*). ============================================================ */ /* ---------- 1. PRIMITIVAS — idénticas en los cuatro temas ---------- */ :root { /* Escala de espaciado — base 4px, progresión perfect-fourth suavizada */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2.5rem; /* 40px */ /* Los tres tramos grandes son fluidos: en fijo, 96 px arriba y 96 abajo dejaban 192 px de vacío entre secciones en una pantalla de 375. */ --space-xl: clamp(2.5rem, 1.5rem + 4.4vw, 4rem); /* 40 → 64px */ --space-2xl: clamp(3.5rem, 1.9rem + 6.8vw, 6rem); /* 56 → 96px */ --space-3xl: clamp(5rem, 2.6rem + 10.2vw, 9rem); /* 80 → 144px */ /* Escala tipográfica fluida — clamp(min, preferido, max) */ --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --text-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); --text-lg: clamp(1.375rem, 1.2rem + 0.85vw, 1.75rem); --text-xl: clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem); --text-2xl: clamp(2.25rem, 1.6rem + 3.2vw, 4rem); --text-3xl: clamp(2.75rem, 1.7rem + 5.2vw, 6rem); /* Interlineado */ --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Tracking */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* para versalitas y etiquetas */ /* Radios — el sistema es sobrio: casi todo recto */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-pill: 999px; /* Grid y medidas */ --measure: 68ch; /* ancho máximo de párrafo */ --container: 76rem; --container-wide: 96rem; --gutter: clamp(1.25rem, 4vw, 4rem); /* Movimiento — discreto. Inmobiliaria, no videojuego. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 560ms; /* Sombras — usadas con extrema moderación */ --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06); --shadow-md: 0 4px 16px -4px rgb(0 0 0 / 0.12); --shadow-lg: 0 24px 48px -16px rgb(0 0 0 / 0.22); /* Estatus de unidad — semántica compartida, no de marca */ --status-disponible: #2E7D4F; --status-apartado: #B8860B; --status-vendido: #8A8A8A; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } /* La entrada por scroll SOLO se activa donde el navegador la soporta. Sin este guardia, un navegador sin animation-timeline deja las secciones en opacity:0 para siempre — contenido invisible. */ .reveal { opacity: 1; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(14px); animation: rise var(--dur-slow) var(--ease-out) forwards; animation-timeline: view(); animation-range: entry 0% cover 22%; } @keyframes rise { to { opacity: 1; transform: none; } } } } /* ---------- 2. TEMAS ---------- */ /* Los hex marcados MARCA vienen del PDF de identidad. Los marcados DERIVADO los generé yo porque la paleta original no cubría ese rol — están sujetos a validación de FH. */ /* ---- FH CONSTRUCCIÓN — institucional / endoso ---- */ [data-brand="fh"] { --font-display: "Oswald", "Arial Narrow", sans-serif; /* sustituye Built Titling */ --font-body: "Archivo", system-ui, sans-serif; /* sustituye Mena Grotesk */ --display-weight: 600; --display-transform: uppercase; --display-tracking: var(--tracking-wide); --surface: #FFFFFF; /* DERIVADO */ --surface-alt: #EDEDED; /* MARCA */ --surface-deep: #000000; /* MARCA */ --ink: #000000; /* MARCA */ --ink-muted: #595959; /* DERIVADO — 7.0:1 sobre blanco */ --ink-inverse: #FFFFFF; /* DERIVADO */ --border: #CBCBCB; /* MARCA */ --border-strong:#000000; /* MARCA */ --accent: #F75B00; /* MARCA */ --accent-ink: #000000; /* negro sobre naranja = 6.5:1 · blanco daría 3.2:1 y reprueba AA */ --accent-quiet: #FFF1E8; /* DERIVADO */ } /* ---- HUNA — preventa · Cholul · natural y sereno ---- */ [data-brand="huna"] { --font-display: "Newsreader", Georgia, serif; /* sustituye Reckless Neue */ --font-body: "Lexend", system-ui, sans-serif; /* ya libre, viene en su kit */ --display-weight: 400; --display-transform: none; --display-tracking: var(--tracking-tight); --surface: #DDD9D2; /* MARCA */ --surface-alt: #EFEDE9; /* DERIVADO — beige aclarado */ --surface-deep: #232E2B; /* MARCA */ --ink: #232E2B; /* MARCA */ --ink-muted: #5A625D; /* DERIVADO */ --ink-inverse: #DDD9D2; /* MARCA */ --border: #C4BFB6; /* DERIVADO */ --border-strong:#7A8175; /* MARCA */ --accent: #D5A462; /* MARCA — ocre */ --accent-ink: #232E2B; --accent-quiet: #EFE3CF; /* DERIVADO */ --secondary: #7A8175; /* MARCA — salvia */ } /* ---- TEANA — entregado · Temozón Norte · cálido y señorial ---- */ [data-brand="teana"] { --font-display: "Fraunces", Georgia, serif; /* sustituye ABC Arizona Flare / Queens */ --font-body: "Archivo", system-ui, sans-serif; --display-weight: 500; --display-transform: none; --display-tracking: var(--tracking-tight); --surface: #E6E5DE; /* MARCA */ --surface-alt: #F2F1EC; /* DERIVADO */ --surface-deep: #2B1B12; /* DERIVADO — la paleta no traía un oscuro */ --ink: #2B1B12; /* DERIVADO */ --ink-muted: #6B5546; /* DERIVADO */ --ink-inverse: #E6E5DE; /* MARCA */ --border: #CFCCC1; /* DERIVADO */ --border-strong:#8F4216; /* MARCA */ --accent: #8F4216; /* MARCA — terracota · 5.6:1 sobre hueso */ --accent-ink: #E6E5DE; --accent-quiet: #F7E4CC; /* DERIVADO */ --secondary: #EBAB66; /* MARCA — ámbar */ } /* ---- XUNÁAN — últimas unidades · Villas La Hacienda · elegante y discreto ---- */ [data-brand="xunaan"] { --font-display: "Instrument Serif", Georgia, serif; /* DERIVADO — su kit no traía display */ --font-body: "Inter", system-ui, sans-serif; /* ya libre, viene en su kit */ --display-weight: 400; --display-transform: none; --display-tracking: var(--tracking-tight); --surface: #EFEFEA; /* MARCA */ --surface-alt: #F7F7F4; /* DERIVADO */ --surface-deep: #1C1C1C; /* MARCA */ --ink: #1C1C1C; /* MARCA */ --ink-muted: #55605F; /* DERIVADO */ --ink-inverse: #EFEFEA; /* MARCA */ --border: #D5D5CE; /* DERIVADO */ --border-strong:#314B3C; /* MARCA */ --accent: #314B3C; /* MARCA — verde bosque */ --accent-ink: #EFEFEA; --accent-quiet: #DDE4E6; /* DERIVADO */ --secondary: #899DA4; /* MARCA — azul gris */ --tertiary: #4A2423; /* MARCA — vino */ } /* ---------- 3. BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); line-height: var(--leading-tight); margin: 0; text-wrap: balance; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-lg); } p { max-width: var(--measure); text-wrap: pretty; } /* ---------- Versalitas: SOLO dos niveles en todo el sistema ---------- Diez variantes de "texto chico en mayúsculas" se leen como diez tipografías distintas. Cualquier etiqueta del sitio usa .label (editorial) o .pill (interfaz). No se inventan más. */ /* Nivel 1 — editorial: eyebrows, claves de dato, encabezados de tabla, pies de foto, créditos. Tracking amplio porque respira suelto. */ .label, .eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-muted); } /* Nivel 2 — interfaz: chips, badges, botones pequeños. Tracking más cerrado porque van dentro de una cápsula y 0.12em los desborda. */ .pill { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; } /* Foco visible — no negociable */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* ---------- 4. BARRA DE SITIOS ---------- Constante en las cuatro páginas: mismo color, mismo orden, misma posición. No se tematiza a propósito — es lo que dice "todo esto es FH". */ .switcher { background: #1C1C1C; color: #EDEDED; } .switcher__inner { max-width: var(--container-wide); margin-inline: auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--space-md); min-height: 40px; } .switcher a { color: inherit; text-decoration: none; white-space: nowrap; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: .62; padding: 0.75rem 0; border-bottom: 2px solid transparent; transition: opacity var(--dur-fast) var(--ease-out); } .switcher a:hover { opacity: 1; } .switcher a[aria-current="page"] { opacity: 1; border-bottom-color: #F75B00; } .switcher__sep { flex: 1; } .switcher__tel { opacity: .62; } @media (max-width: 720px) { .switcher__inner { gap: var(--space-sm); overflow-x: auto; scrollbar-width: none; } .switcher__inner::-webkit-scrollbar { display: none; } .switcher__tel { display: none; } } /* El menú de sección nunca parte una etiqueta en dos renglones */ .site-nav a, .tagline { white-space: nowrap; }