/* ============================================================ GEOMARINE SYSTEM — TOKENS DE DISEÑO ------------------------------------------------------------ Fuente única de verdad para color, tipografía, espaciado, radios y sombras. Los valores de COLOR se extrajeron sin modificación de geomarine-modern.css y geomarine-theme.css, y coinciden con DESIGN.md. Los de ESPACIADO, TIPOGRAFÍA, RADIO y SOMBRA se extrajeron de los valores que ya usaban las páginas (86px de sección, 48px bajo el encabezado, radio 20px, sombra 0 15px 40px con tinte azul de marca, etc.). Cargar SIEMPRE antes de geomarine-modern.css y geomarine-theme.css. Esas dos hojas redeclaran los mismos colores en su propio :root — se mantiene así a propósito para que las páginas antiguas sigan funcionando aunque no enlacen este archivo. Los tokens nuevos (espaciado, tipo, sombra) solo viven aquí. ============================================================ */ :root { /* ── COLOR ─────────────────────────────────────────────── Paleta deliberadamente angosta: dos azules + un acento. Regla del acento único: --gm-signal marca lo interactivo. */ --gm-navy: #041E42; /* fondo de hero y footer */ --gm-primary: #0B3B6D; /* color de marca, títulos */ --gm-ocean: #1E5F99; /* segundo paso de degradado */ --gm-signal: #2D7DD2; /* ÚNICO acento interactivo */ --gm-signal-light: #4A8FC7; /* paso claro de degradado */ --gm-white: #FFFFFF; --gm-surface: #F8F9FA; /* fondo de secciones alternas */ --gm-border: #E9ECEF; --gm-ink: #2D3748; /* texto de cuerpo */ /* Texto secundario. DESIGN.md documenta Slate como #6C757D, pero ese valor rinde 4.45:1 sobre --gm-surface y no alcanza el 4.5:1 que exige WCAG 2.1 AA. Se oscurece lo mínimo necesario para pasar sobre los dos fondos en que se usa: #646E77 sobre --gm-surface (#F8F9FA) = 4.93:1 #646E77 sobre --gm-white (#FFFFFF) = 5.20:1 La diferencia visual es imperceptible; el incumplimiento no. */ --gm-slate: #646E77; /* Retroalimentación de formulario. DESIGN.md no define paleta de estado; estos valores son los que contacto.html ya usaba en estilos en línea, promovidos aquí a tokens para que dejen de repetirse sueltos por el sitio. Todos verificados a >= 4.5:1 sobre su propio fondo. */ --gm-success: #48BB78; --gm-success-text: #1B7A3E; --gm-success-bg: #E6F7EC; --gm-success-line: #A3E0BB; --gm-danger: #C0392B; --gm-danger-bg: #FDECEA; --gm-danger-line: #F3B6AD; --gm-danger-ring: rgba(192, 57, 43, .18); --gm-signal-ring: rgba(45, 125, 210, .18); /* Texto sobre fondo oscuro */ --gm-on-dark: #FFFFFF; --gm-on-dark-muted: rgba(255,255,255,.86); /* 4.5:1 sobre --gm-navy */ /* ── DEGRADADOS ─────────────────────────────────────────── */ --gm-grad-signal: linear-gradient(135deg, var(--gm-signal) 0%, var(--gm-ocean) 100%); --gm-grad-navy: linear-gradient(135deg, var(--gm-navy) 0%, var(--gm-primary) 100%); /* ── TIPOGRAFÍA ─────────────────────────────────────────── */ --gm-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --gm-font-editorial: 'Merriweather', Georgia, serif; /* Escala fluida. El h2 replica el clamp que ya usaba el sitio. */ --gm-fs-hero: clamp(2.1rem, 5.2vw, 3.8rem); --gm-fs-h1: clamp(1.9rem, 4.2vw, 3rem); --gm-fs-h2: clamp(1.8rem, 3.5vw, 3rem); --gm-fs-h3: clamp(1.15rem, 1.6vw, 1.6rem); --gm-fs-lede: clamp(1.05rem, 1.3vw, 1.2rem); --gm-fs-body: 1rem; --gm-fs-sm: .92rem; --gm-fs-label: .78rem; --gm-lh-tight: 1.15; --gm-lh-heading: 1.25; --gm-lh-body: 1.7; --gm-lh-lede: 1.85; --gm-fw-body: 400; --gm-fw-medium: 500; --gm-fw-semi: 600; --gm-fw-bold: 700; --gm-fw-display: 800; /* Ancho de línea cómodo: 60–75 caracteres en cuerpo de texto. */ --gm-measure: 68ch; --gm-measure-wide: 820px; /* ancho de .section-header existente */ /* ── ESPACIADO ──────────────────────────────────────────── */ --gm-space-2: 2px; --gm-space-4: 4px; --gm-space-8: 8px; --gm-space-12: 12px; --gm-space-16: 16px; --gm-space-24: 24px; --gm-space-32: 32px; --gm-space-40: 40px; --gm-space-48: 48px; --gm-space-64: 64px; --gm-space-86: 86px; /* ritmo vertical de sección del sitio */ --gm-section-y: var(--gm-space-86); --gm-section-y-lg: 112px; /* bloques densos que piden más aire */ --gm-header-gap: var(--gm-space-48); /* bajo .section-header */ --gm-card-gap: 30px; /* ── RADIOS ─────────────────────────────────────────────── */ --gm-radius-sm: 8px; --gm-radius: 20px; /* tarjetas y paneles */ /* Los botones del sitio son rectangulares de 4px: el tema fuerza ese valor en .btn-monitoring, .hero-btn-primary y .btn-cta. DESIGN.md todavía describe una píldora de 25px, que ya no es lo que se sirve. Se replica el valor real para no romper la fila. */ --gm-radius-btn: 4px; --gm-radius-lg: 24px; --gm-radius-pill: 999px; --gm-radius-circle: 50%; /* ── SOMBRAS ──────────────────────────────────────────────── Regla de la sombra teñida: ninguna sombra es gris neutro. */ --gm-shadow-rest: 0 15px 40px rgba(11, 59, 109, .12); --gm-shadow-media: 0 15px 40px rgba(11, 59, 109, .15); --gm-shadow-hover: 0 25px 60px rgba(45, 125, 210, .20); --gm-shadow-icon: 0 12px 35px rgba(45, 125, 210, .40); --gm-shadow-sm: 0 4px 14px rgba(11, 59, 109, .08); /* ── MOVIMIENTO ─────────────────────────────────────────── */ --gm-ease: cubic-bezier(.4, 0, .2, 1); --gm-dur-fast: .18s; --gm-dur: .25s; --gm-dur-slow: .45s; /* ── FOCO ─────────────────────────────────────────────────── Celeste de 3px, igual al que ya usan todas las páginas. */ --gm-focus-color: #7EC8E3; --gm-focus-ring: 3px solid var(--gm-focus-color); --gm-focus-offset: 3px; /* ── CAPAS ──────────────────────────────────────────────── */ --gm-z-header: 1000; --gm-z-float: 600; --gm-z-dialog: 1200; } /* Quien prefiera menos movimiento, no recibe ninguno. */ @media (prefers-reduced-motion: reduce) { :root { --gm-dur-fast: .01ms; --gm-dur: .01ms; --gm-dur-slow: .01ms; } }