/** * Viviaza © 2026 — Todos los derechos reservados. * * Tipo de archivo: CSS * Nombre del archivo: _tokens.css * Versión nueva: 1.1.0 * Tipo de cambio: minor (CWV CLS: fallback fonts con metric overrides incluidos en --font-*) * Fecha de creación: 21/05/2026 * Fecha de modificación: 28/05/2026 * * Cambios v1.1.0 (28/05/2026): * - --font-sans y --font-serif ahora incluyen 'Manrope Fallback' y * 'Fraunces Fallback' inmediatamente después del web font. Esos * fallbacks están declarados en critical_css.php con métricas * calibradas (size-adjust, ascent-override, descent-override) que * hacen que el texto pre-swap ocupe el mismo alto que el web font. * - Mata el CLS por font swap que PSI marcaba con woff2 contribuidores. * * Descripción: Fundación visual única para TODO el sitio Viviaza * (Inmuebles y Más MX + Hoggary CO/CL/PE). Contiene * exclusivamente variables CSS — sin reglas de layout, * sin componentes. Es el ÚNICO archivo donde viven los * colores hex, los nombres de fuente y los valores de * radios/sombras. Todo lo demás del proyecto consume * estas variables vía var(--c-primary), etc. * * Cambiar la marca aquí → cambia en todo el sitio. * * Descripción del cambio: Creación inicial. Reemplaza las definiciones * dispersas de --brand-navy/--brand-green/--brand-orange * que vivían en cada CSS del proyecto antiguo. * * Estado: listo para producción */ /* ============================================================ :root — Variables globales Se aplica al elemento raíz ; todas las descendientes (es decir, TODO el documento) heredan estos valores. ============================================================ */ :root { /* ======================================================== PALETA "FRESCO EQUILIBRADO" (aprobada 19/05/2026) 60-30-10: primary 60% / accent 10% / action 30% ======================================================== */ /* Primario — Azul medianoche Uso: header, footer, titulares, estructura. Da seriedad y confianza institucional. */ --c-primary: #1B2C4F; --c-primary-dark: #14213B; /* hover oscuro */ --c-primary-soft: #2E4470; /* gradientes, fondos secundarios */ /* Acento — Coral terracota Uso: badges, micro-detalles, calidez, hover decorativo. Aporta humanidad sin ser ruidoso. */ --c-accent: #E07856; --c-accent-dark: #C7613F; /* hover */ --c-accent-soft: rgba(224, 120, 86, 0.10); /* fondos sutiles */ /* Acción — Teal moderno Uso: CTAs principales (Publicar, Buscar, Enviar), links de acción, indicadores de "todo bien". Tono refrescante. */ --c-action: #0EA5A0; --c-action-dark: #0B8580; /* hover */ --c-action-cta: #0A7D79; /* CTA accesible: 4.97:1 con texto blanco (WCAG AA). Igual que --c-action pero un pelín más oscuro para pasar contraste en botones. */ --c-action-cta-hover: #086B68; /* hover del CTA accesible: 6.34:1 */ --c-action-soft: rgba(14, 165, 160, 0.10); /* fondos sutiles */ /* ======================================================== FONDOS ======================================================== */ --c-bg: #F8F5F0; /* fondo de página — crema cálido */ --c-bg-alt: #FFFFFF; /* tarjetas, bloques claros */ --c-bg-soft: #F1ECE3; /* bandas de sección, alternancia */ --c-bg-dark: var(--c-primary); /* alias para bandas oscuras */ /* ======================================================== TEXTO ======================================================== */ --c-text: #1F2937; /* texto principal — alto contraste */ --c-text-dim: #64748B; /* metadatos, captions */ --c-text-muted: #94A3B8; /* placeholder, disabled */ --c-text-on-dark: #FFFFFF; /* texto sobre fondos oscuros */ --c-text-on-dark-dim: rgba(255, 255, 255, 0.78); /* ======================================================== BORDES Y DIVISORES ======================================================== */ --c-border: #E5E0D6; /* borde sutil tono crema */ --c-border-strong: #D6CFC0; /* borde marcado */ --c-border-on-dark: rgba(255, 255, 255, 0.10); /* ======================================================== ESTADOS UTILITARIOS (avisos, validación de formularios) ======================================================== */ --c-success: #10B981; --c-success-soft: rgba(16, 185, 129, 0.10); --c-warning: #F5A623; /* también para estrellas de rating */ --c-warning-soft: rgba(245, 166, 35, 0.12); --c-danger: #DC2626; --c-danger-soft: rgba(220, 38, 38, 0.10); --c-info: #3B82F6; --c-info-soft: rgba(59, 130, 246, 0.10); /* Marcas externas (mantener oficial) */ --c-whatsapp: #25D366; --c-facebook: #1877F2; /* ======================================================== TIPOGRAFÍA DUAL - Fraunces: titulares, precios destacados (toque editorial) - Manrope: UI, cuerpo, botones, formularios - Mono: códigos internos (IYM-2847, etc.) ======================================================== */ /* Los "Fallback" están declarados en includes/critical_css.php con @font-face local('Arial')/local('Times New Roman') + métricas ajustadas. Se posicionan ANTES de los nativos para que cuando el web font aún no cargó, el navegador use el fallback ajustado y NO haga shift al hacer swap. */ --font-serif: 'Fraunces', 'Fraunces Fallback', 'Times New Roman', Georgia, serif; --font-sans: 'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'SF Mono', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Pesos (consistentes en todo el sitio) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Escala tipográfica (basada en 16px = 1rem) */ --fs-xs: 0.75rem; /* 12px — caption */ --fs-sm: 0.875rem; /* 14px — small */ --fs-base: 1rem; /* 16px — body */ --fs-md: 1.125rem; /* 18px — lead */ --fs-lg: 1.25rem; /* 20px — h5 */ --fs-xl: 1.5rem; /* 24px — h4 */ --fs-2xl: 2rem; /* 32px — h3 */ --fs-3xl: 2.5rem; /* 40px — h2 */ --fs-4xl: 3rem; /* 48px — h1 mobile */ --fs-5xl: 3.75rem; /* 60px — h1 desktop */ /* Altura de línea */ --lh-tight: 1.15; /* titulares */ --lh-snug: 1.3; /* subtítulos */ --lh-normal: 1.5; /* cuerpo */ --lh-relaxed: 1.7; /* descripciones largas */ /* ======================================================== SOMBRAS — elevación visual (tinte azul medianoche) ======================================================== */ --shadow-xs: 0 1px 2px rgba(27, 44, 79, 0.05); --shadow-sm: 0 2px 6px rgba(27, 44, 79, 0.06); --shadow: 0 4px 12px rgba(27, 44, 79, 0.08); --shadow-md: 0 8px 20px rgba(27, 44, 79, 0.10); --shadow-lg: 0 16px 40px rgba(27, 44, 79, 0.14); --shadow-xl: 0 24px 56px rgba(27, 44, 79, 0.18); /* Sombra de hover con tinte teal (acción) */ --shadow-hover: 0 10px 24px rgba(14, 165, 160, 0.15); /* Foco accesible (focus-visible) */ --shadow-focus: 0 0 0 3px var(--c-action-soft); /* ======================================================== RADIOS DE BORDE ======================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* píldoras y círculos */ /* ======================================================== LAYOUT Y ESPACIADO ======================================================== */ --max-width: 1280px; /* contenido normal */ --max-width-wide: 1440px; /* hero, mapas, listados anchos */ --max-width-narrow: 960px; /* artículos, formularios */ --max-width-read: 720px; /* texto largo legible */ --header-height: 72px; --header-height-mobile: 60px; /* Sistema de espaciado (escala de 4) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Padding lateral común (responsive) */ --container-padding-mobile: 16px; --container-padding-tablet: 24px; --container-padding-desktop: 32px; /* ======================================================== TRANSICIONES Y ANIMACIONES Cortas para no afectar INP (Core Web Vital). ======================================================== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ======================================================== Z-INDEX — orden de capas Definir aquí evita conflictos por todo el sitio. ======================================================== */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 800; --z-modal: 900; --z-toast: 950; --z-tooltip: 999; /* ======================================================== BREAKPOINTS (para referencia — las @media queries usan estos valores directamente). sm: 640px — móvil grande md: 768px — tablet lg: 1024px — desktop xl: 1280px — desktop grande 2xl: 1536px — pantalla amplia ======================================================== */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* ======================================================== ASPECTOS — CLS (Cumulative Layout Shift) prevention Reservar proporción antes de que carguen imágenes. ======================================================== */ --aspect-card-photo: 4 / 3; /* tarjeta de propiedad */ --aspect-hero-photo: 16 / 9; /* hero del home */ --aspect-gallery: 3 / 2; /* galería del anuncio */ --aspect-square: 1 / 1; /* avatares, miniaturas */ /* ======================================================== ESQUEMA DE COLOR — preparado para modo oscuro futuro (No implementado aún; solo declarado para que cuando activemos prefers-color-scheme: dark sea trivial.) ======================================================== */ color-scheme: light; } /* ============================================================ FALLBACK PARA NAVEGADORES MUY ANTIGUOS (>2020) Si un usuario llega con un navegador que no soporta CSS variables (raro hoy), garantizamos contenido legible. ============================================================ */ @supports not (--c-primary: #1B2C4F) { body { background: #F8F5F0; color: #1F2937; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; } }