/* ===================================================================== AlojamientosRurales — Sistema de diseño (fuente única de verdad) --------------------------------------------------------------------- Define TODOS los tokens del portal público: paleta de marca, neutros, colores semánticos, tipografía, espaciado, radios, sombras, contenedores y transiciones. Cargar SIEMPRE el primero (antes que ar-layout.css). El resto de hojas (incluidas las legacy con muchos !important) consumen estos tokens a través de sus propios :root, redirigidos aquí. Cambiar una marca/medida en este archivo se propaga a todo el sitio. ===================================================================== */ :root { /* ---- Marca (verde lima canónico #79ad1a) ---------------------- */ --ar-brand: #79ad1a; /* primario */ --ar-brand-strong: #6a9916; /* hover botones */ --ar-brand-dark: #5c8413; /* texto/acento sobre claro */ --ar-brand-darker: #406010; /* máximo contraste sobre soft */ --ar-brand-soft: #f1f8e3; /* fondo tinte suave */ --ar-brand-soft-2: #e5f1d8; /* fondo tinte un punto más */ --ar-brand-line: #cfe2bd; /* bordes sobre soft */ --ar-brand-bright: #8bc34a; /* acento brillante SOLO sobre foto/oscuro */ --ar-brand-rgb: 121, 173, 26; /* lima canónico en rgb (para rgba()) */ --ar-brand-bright-rgb: 139, 195, 74; /* brillante en rgb (glows sobre foto) */ /* ---- Neutros (familia gris-frío ya usada en el portal) -------- */ --ar-ink: #172331; /* texto principal / titulares */ --ar-ink-soft: #344252; /* texto secundario fuerte */ --ar-body: #3f4f5f; /* cuerpo de texto */ --ar-muted: #607080; /* texto atenuado / metadatos */ --ar-muted-2: #8493a2; /* placeholders / iconos suaves */ --ar-line: #dce3eb; /* bordes estándar */ --ar-line-soft: #edf1f4; /* separadores suaves */ --ar-surface: #ffffff; /* tarjetas / superficies */ --ar-surface-soft: #f8faf5; /* superficie alterna */ --ar-page: #f4f6f2; /* fondo de página */ /* ---- Colores semánticos -------------------------------------- */ --ar-success: #4f6a34; --ar-success-bg: #f1f8e9; --ar-success-line: #cfe2bd; --ar-info: #347487; --ar-info-bg: #eff9fb; --ar-info-line: #c5dce4; --ar-warning: #e07918; --ar-warning-bg: #fdf3e8; --ar-warning-line: #f3d4ad; --ar-danger: #c0392b; --ar-danger-bg: #fcefed; --ar-danger-line: #f0c4be; /* ---- Tipografía ---------------------------------------------- Fuente del SISTEMA (system-ui): cero peso de red (WPO), limpia y nativa en cada dispositivo. No se carga ninguna webfont. Escala SOBRIA y contenida (estándares web, sin titulares enormes): body 16 · H2 sección 20-22 · H1 página/ficha 27 · hero 32 máx. */ --ar-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ar-text-xs: 0.8125rem; /* 13px — kicker, metadatos, registro */ --ar-text-sm: 0.875rem; /* 14px — texto secundario, chips, sort */ --ar-text-base: 1rem; /* 16px — cuerpo */ --ar-text-md: 1.0625rem; /* 17px — entradilla */ --ar-text-lg: 1.125rem; /* 18px — título de card */ --ar-text-xl: 1.25rem; /* 20px — H2 pequeño / card destacada */ --ar-text-2xl: 1.375rem; /* 22px — H2 sección / H1 listado */ --ar-text-3xl: 1.6875rem; /* 27px — H1 ficha / página */ --ar-text-4xl: 2rem; /* 32px — H1 hero (máximo del sitio) */ --ar-leading-tight: 1.2; --ar-leading-snug: 1.35; --ar-leading-normal: 1.5; --ar-leading-relaxed:1.65; --ar-weight-normal: 400; --ar-weight-medium: 500; --ar-weight-semibold: 600; --ar-weight-bold: 700; /* titulares: tope (sin 800/900) */ /* ---- Tamaños de icono (SVG finos de línea, stroke ~1.7-1.8) -- */ --ar-icon-xs: 14px; --ar-icon-sm: 16px; --ar-icon-md: 18px; /* por defecto: servicios, listas, botones */ --ar-icon-lg: 20px; /* acciones (favorito/compartir), features */ --ar-icon-xl: 22px; /* destacados / quick-facts */ /* ---- Espaciado (escala base 4px) ----------------------------- */ --ar-space-1: 0.25rem; /* 4 */ --ar-space-2: 0.5rem; /* 8 */ --ar-space-3: 0.75rem; /* 12 */ --ar-space-4: 1rem; /* 16 */ --ar-space-5: 1.25rem; /* 20 */ --ar-space-6: 1.5rem; /* 24 */ --ar-space-8: 2rem; /* 32 */ --ar-space-10: 2.5rem; /* 40 */ --ar-space-12: 3rem; /* 48 */ --ar-space-16: 4rem; /* 64 */ --ar-space-20: 5rem; /* 80 */ /* ---- Radios (más contenidos, menos exagerados) --------------- */ --ar-radius-xs: 4px; --ar-radius-sm: 6px; --ar-radius-md: 9px; --ar-radius-lg: 12px; --ar-radius-xl: 16px; --ar-radius-pill: 999px; /* ---- Sombras (sobrias: menos profundidad/dispersión) --------- */ --ar-shadow-xs: 0 1px 2px rgba(20, 30, 40, .04); --ar-shadow-sm: 0 1px 3px rgba(20, 30, 40, .05); --ar-shadow-md: 0 3px 10px rgba(20, 30, 40, .06); --ar-shadow-lg: 0 8px 24px rgba(15, 30, 45, .09); /* ---- Contenedores y maquetación ------------------------------ Gutter lateral responsive (redefinido en @media al final): móvil 16 · tablet 24 · escritorio 32 (dentro del contenedor 1240). */ --ar-container: 1240px; --ar-container-narrow: 880px; --ar-gutter: 16px; /* ---- Transiciones / foco ------------------------------------- */ --ar-transition: 160ms ease; --ar-transition-slow: 280ms ease; --ar-ring: 0 0 0 3px rgba(121, 173, 26, .35); --ar-focus: #ffbf47; /* foco accesible de alto contraste (ámbar) */ /* ---- Componentes: botones ----------------------------------- El lima puro (#79ad1a) sobre blanco no alcanza contraste AA, así que las CTA con texto blanco usan brand-dark (mismo tono, más legible). Lima queda para acentos, bordes y rellenos claros. */ --ar-btn-primary-bg: var(--ar-brand-dark); --ar-btn-primary-bg-hover: var(--ar-brand-darker); --ar-btn-primary-fg: #ffffff; --ar-btn-primary-line: var(--ar-brand-dark); --ar-btn-soft-bg: var(--ar-brand-soft); --ar-btn-soft-bg-hover: var(--ar-brand-soft-2); --ar-btn-soft-fg: var(--ar-brand-darker); --ar-btn-soft-line: var(--ar-brand-line); --ar-btn-light-bg: var(--ar-surface); --ar-btn-light-fg: var(--ar-ink-soft); --ar-btn-light-line: var(--ar-line); --ar-control-radius: 14px; /* botones e inputs (valor dominante del portal) */ --ar-control-min-h: 46px; /* ---- Componentes: chips / badges ----------------------------- */ --ar-chip-bg: var(--ar-surface); --ar-chip-bg-active: var(--ar-brand-soft); --ar-chip-fg: var(--ar-ink-soft); --ar-chip-fg-active: var(--ar-brand-darker); --ar-chip-line: var(--ar-line); --ar-chip-line-active: var(--ar-brand-line); } /* --------------------------------------------------------------------- Gutter lateral responsive (márgenes del contenido por breakpoint). Lo consumirá el contenedor global en Fase 2 (var(--ar-gutter)). --------------------------------------------------------------------- */ @media (min-width: 768px) { :root { --ar-gutter: 24px; } } @media (min-width: 1024px) { :root { --ar-gutter: 32px; } } /* ===================================================================== SISTEMA VISUAL v2 (Fase 2 — nueva identidad minimalista) --------------------------------------------------------------------- Namespace propio (--ui-*) para poder aplicarlo a UNA pantalla de muestra (listado) sin alterar el resto, que sigue usando --ar-*. Al propagar, este sistema pasa a ser el canónico de toda la web. Criterio: una sola familia sans (system-ui), jerarquía por tamaño/peso; base neutra (blancos/grises medidos); verde lima SOLO como acento de acción. Documentado en docs/00-PROYECTO/SISTEMA-VISUAL.md ===================================================================== */ :root { /* ---- Tipografía: una sola familia, escala contenida -------------- */ --ui-font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ui-text-xs: 0.75rem; /* 12 — meta, contador foto */ --ui-text-sm: 0.8125rem; /* 13 — secundario, ubicación, breadcrumb */ --ui-text-base: 0.9375rem; /* 15 — cuerpo/descripción */ --ui-text-md: 1rem; /* 16 — inputs (evita zoom iOS) */ --ui-text-lg: 1.125rem; /* 18 — título de card */ --ui-text-xl: 1.25rem; /* 20 — subtítulo */ --ui-text-2xl: 1.5rem; /* 24 — H1 de listado */ --ui-w-regular: 400; --ui-w-medium: 500; --ui-w-semi: 600; --ui-w-bold: 700; --ui-leading-tight: 1.25; --ui-leading-normal: 1.5; --ui-leading-relaxed: 1.6; --ui-tracking-tight: -0.011em; /* ---- Color: base neutra; verde solo acento ---------------------- */ --ui-bg: #ffffff; /* superficie */ --ui-bg-subtle: #f6f7f8; /* fondo de página / alterno */ --ui-bg-hover: #f1f3f4; /* hover sutil neutro */ --ui-text-strong: #14181c; /* titulares / precio */ --ui-text: #2b3138; /* cuerpo principal */ --ui-text-soft: #59616a; /* secundario */ --ui-text-muted: #878f98; /* meta / placeholders */ --ui-border: #e8eaed; /* bordes sutiles */ --ui-border-strong:#d4d8dd; /* bordes/hover */ --ui-accent: #5c8413; /* lima oscuro (AA sobre blanco): enlaces, activo */ --ui-accent-strong: #4c6e10; /* hover de acento */ --ui-accent-soft: #f0f6e6; /* fondo de estado activo */ --ui-accent-line: #d6e6bd; /* borde sobre soft */ --ui-on-accent: #ffffff; /* texto sobre acento */ --ui-focus: 0 0 0 3px rgba(92, 132, 19, .28); /* ---- Espaciado (escala 4px) ------------------------------------- */ --ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px; --ui-space-4: 16px; --ui-space-5: 20px; --ui-space-6: 24px; --ui-space-8: 32px; --ui-space-10: 40px; --ui-space-12: 48px; --ui-space-16: 64px; /* ---- Radios (sobrios) ------------------------------------------- */ --ui-radius-sm: 6px; --ui-radius: 10px; --ui-radius-lg: 14px; --ui-radius-pill: 999px; /* ---- Sombras (mínimas; preferir bordes) ------------------------- */ --ui-shadow-sm: 0 1px 2px rgba(16, 24, 32, .04); --ui-shadow: 0 2px 8px rgba(16, 24, 32, .06); --ui-shadow-hover: 0 10px 26px rgba(16, 24, 32, .10); /* ---- Contenedor / layout ---------------------------------------- */ --ui-container: 1200px; --ui-gutter: 16px; --ui-transition: 160ms ease; --ui-control-h: 44px; } @media (min-width: 768px) { :root { --ui-gutter: 24px; } } @media (min-width: 1024px) { :root { --ui-gutter: 32px; } }