/** * Tokens del sistema de diseño Congloser. * * Único archivo del tema donde puede aparecer un valor de color literal. * Los velos se componen con las tripletas RGB: rgba(var(--cg-navy-900-rgb), .94). */ :root { /* ---- Color ---- */ --cg-navy-900: #052f57; /* Fondos oscuros, footer, banda de values, overlays */ --cg-navy-700: #0c4c87; /* Titulares, botones secundarios, estado activo */ --cg-orange: #f37221; /* Acento primario: CTA, eyebrows, subrayados, flechas */ --cg-orange-dark: #d95f14;/* Hover de CTA naranja */ --cg-gold: #f3b021; /* Acento secundario: barras, eyebrow sobre oscuro, marcos */ --cg-brown-900: #874924; /* Overlay exclusivo de la línea Manlift */ --cg-gray-700: #484651; /* Texto de párrafo sobre claro */ --cg-blue-200: #cad6e4; /* Texto secundario sobre oscuro, bordes de campo */ --cg-blue-100: #e4ecf5; /* Texto de párrafo sobre oscuro */ --cg-line: #e6e9f2; /* Bordes de tarjeta y divisores sobre claro */ --cg-line-strong: #e0e3f0;/* Separador de grillas de celdas (gap coloreado) */ --cg-surface: #f6f6ff; /* Fondo de sección alterna, chips, cajas de dato */ --cg-surface-off: #eef0f8;/* Campo deshabilitado */ --cg-white: #ffffff; --cg-navy-950: #0b2035; /* Fondo del reproductor de vídeo */ --cg-ink: #0d1a26; /* Superficie oscura: negro azulado, no azul de marca */ --cg-ink-rgb: 13, 26, 38; --cg-brown-100: #f3e3d6; /* Texto sobre el velo tierra de la línea Manlift */ --cg-whatsapp: #25d366; /* Único color fuera de marca */ /* Tripletas para componer velos y sombras sin escribir hex fuera de aquí */ --cg-navy-900-rgb: 5, 47, 87; --cg-navy-700-rgb: 12, 76, 135; --cg-orange-rgb: 243, 114, 33; --cg-gold-rgb: 243, 176, 33; --cg-brown-900-rgb: 135, 73, 36; --cg-blue-200-rgb: 202, 214, 228; --cg-white-rgb: 255, 255, 255; --cg-whatsapp-rgb: 37, 211, 102; --cg-neutral-rgb: 6, 14, 22; /* Negro azulado: base de todos los velos de sección */ /* ---- Velos ---- Los velos de sección van en negro azulado, no en azul de marca: sobre foto el navy teñía la imagen de azul y se perdía el color real del equipo. El azul de marca se reserva para los fondos planos y para el velo de tarjeta, que sí distingue línea de negocio. */ --cg-veil-dark: rgba(var(--cg-neutral-rgb), .9); /* El catálogo de servicios abre un punto el velo (index.html:196) */ --cg-veil-servicios: rgba(var(--cg-neutral-rgb), .88); --cg-veil-cta: linear-gradient(100deg, rgba(var(--cg-neutral-rgb), .92), rgba(var(--cg-neutral-rgb), .78)); --cg-veil-hero: linear-gradient(100deg, rgba(var(--cg-neutral-rgb), .92) 0%, rgba(var(--cg-neutral-rgb), .8) 44%, rgba(var(--cg-neutral-rgb), .46) 100%); /* Tres paradas: el texto al pie necesita fondo sólido y la foto respira arriba. Cada línea de negocio tiñe su tarjeta con su color. Tarjeta del catálogo de servicios (servicios.html:91 grúas, :146 manlift). La instancia de portada (index.html:215/:255) cierra 1 punto menos de alfa; se unifica en estos valores porque la diferencia no es perceptible. */ --cg-veil-card-gruas: linear-gradient(to top, rgba(var(--cg-navy-900-rgb), .97) 26%, rgba(var(--cg-navy-900-rgb), .42) 72%, rgba(var(--cg-navy-900-rgb), .12) 100%); --cg-veil-card-manlift: linear-gradient(to top, rgba(var(--cg-brown-900-rgb), .96) 26%, rgba(var(--cg-brown-900-rgb), .44) 72%, rgba(var(--cg-brown-900-rgb), .12) 100%); /* Tarjeta de línea de negocio (index.html:162 grúas, :178 manlift). Es más alta que la del catálogo, así que el velo sube la parada y densifica el medio para que el listado se lea sobre la foto. */ --cg-veil-linea-gruas: linear-gradient(to top, rgba(var(--cg-navy-900-rgb), .97) 30%, rgba(var(--cg-navy-900-rgb), .72) 62%, rgba(var(--cg-navy-900-rgb), .35) 100%); --cg-veil-linea-manlift: linear-gradient(to top, rgba(var(--cg-brown-900-rgb), .96) 30%, rgba(var(--cg-brown-900-rgb), .7) 62%, rgba(var(--cg-brown-900-rgb), .3) 100%); /* ---- Tipografía ---- */ --cg-font: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif; /* design.md §2 lo fija en clamp(44px, 7.4vw, 84px). Se baja un escalón por decisión de diseño: a 84px el salto contra la bajada era de 3,8x y el titular se leía desproporcionado frente al resto del hero. */ --cg-fs-h1-hero: clamp(40px, 5.6vw, 64px); --cg-fs-h1: clamp(32px, 4.6vw, 48px); --cg-fs-h2: clamp(28px, 3.5vw, 42px); --cg-fs-h3: clamp(20px, 1.9vw, 23px); --cg-fs-h3-lg: clamp(21px, 2vw, 24px); --cg-fs-lead: clamp(17px, 1.7vw, 22px); --cg-fs-lead-hero: clamp(18px, 1.9vw, 24px); --cg-fs-lead-sm: clamp(16px, 1.5vw, 19px); --cg-fs-body: 16px; --cg-fs-item: 15px; --cg-fs-eyebrow: 14px; --cg-fs-label: 13px; --cg-fs-cifra: clamp(38px, 5.4vw, 76px); --cg-fs-btn: 18px; --cg-ls-eyebrow: .12em; --cg-ls-label: .09em; --cg-ls-num: .1em; /* ---- Layout ---- */ --cg-container: clamp(1240px, 94vw, 1600px); --cg-pad-x: clamp(20px, 4vw, 32px); --cg-pad-y: clamp(56px, 7vw, 96px); --cg-pad-y-compact: clamp(32px, 4vw, 48px); --cg-pad-y-wide: clamp(72px, 9vw, 128px); --cg-gap-dense: clamp(16px, 2vw, 22px); --cg-gap-photo: clamp(18px, 2.2vw, 24px); --cg-gap-text: clamp(18px, 2.4vw, 26px); --cg-gap-col: clamp(32px, 4.4vw, 56px); --cg-radius: 12px; --cg-radius-input: 6px; --cg-radius-pill: 999px; --cg-shadow-hover: 0 22px 44px rgba(var(--cg-navy-900-rgb), .16); --cg-shadow-header: 0 10px 28px rgba(var(--cg-navy-900-rgb), .16); --cg-shadow-card: 0 2px 10px rgba(var(--cg-navy-700-rgb), .12); /* Altura real del header fijo; el JS la actualiza al montar y al redimensionar */ --cg-header-h: 76px; /* ---- Movimiento ---- */ --cg-ease: cubic-bezier(.16, .84, .28, 1); --cg-t-rise-o: .72s; /* opacidad del izaje */ --cg-t-rise-t: .78s; /* transform del izaje */ --cg-t-bar: .82s; /* barra que se dibuja al entrar en pantalla */ --cg-t-bar-enter: .9s; /* la misma barra en la carga de página, algo más lenta */ --cg-t-underline: .95s;/* subrayado que se traza */ --cg-t-photo: .8s; /* zoom de foto en hover de tarjeta */ --cg-t-ui: .22s; /* hovers de interfaz */ --cg-stagger: 80ms; /* desfase entre hermanos */ --cg-bar-lag: 110ms; /* desfase entre barra dorada y naranja */ --cg-underline-delay: .3s; }