/* ============================================================
GRUPO COPRINCI — TOKENS DE MARCA
Extraídos del "Manual de identidad GRUPO COPRINCI" (2026)
Fuente de verdad para colores, tipografía y motivos.
============================================================ */
:root {
/* --- Colores corporativos (núcleo) --- */
--azul: #0060f1; /* RGB 0,96,241 — primario / acción */
--marino: #103461; /* RGB 16,52,97 — fondos oscuros / hero */
--naranja: #f97316; /* RGB 249,115,22 — acento, CTA secundario */
/* --- Colores base (neutros) --- */
--roca: #16232b; /* RGB 22,35,43 — texto oscuro / footer */
--acero: #596a71; /* RGB 89,106,113 — texto secundario */
--cal: #f2f6f7; /* RGB 242,246,247— fondos claros */
/* --- Colores acento (uso puntual, alta visibilidad) --- */
--fuerza: #0a5f63; /* RGB 10,95,99 — teal, datos/etiquetas */
--energia: #ffb901; /* RGB 255,185,1 — amarillo, highlights */
/* --- Gradiente de marca (azul -> marino), usado en hero/isotipo --- */
--grad-marca: linear-gradient(135deg, var(--azul) 0%, var(--marino) 100%);
--grad-hero: linear-gradient(120deg, #0a1a33 0%, var(--marino) 45%, #0747a8 100%);
/* --- Semánticos --- */
--bg: #ffffff;
--bg-soft: var(--cal);
--bg-dark: var(--marino);
--text: var(--roca);
--text-soft: var(--acero);
--text-invert: #ffffff;
--accent: var(--naranja);
--link: var(--azul);
--border: #dde5e9;
/* --- Tipografía (Google Fonts, idéntica al manual) ---
Primaria: Blinker (títulos, CTA, números) -> Light/Regular/SemiBold/Bold
Secundaria: Fira Sans (cuerpo de texto) -> Light/Regular/Medium */
--font-display: 'Blinker', system-ui, sans-serif;
--font-body: 'Fira Sans', system-ui, sans-serif;
/* --- Escala tipográfica (clamp = responsive sin breakpoints) --- */
--fs-hero: clamp(2.4rem, 6vw, 4.6rem);
--fs-h1: clamp(2rem, 4.5vw, 3.4rem);
--fs-h2: clamp(1.6rem, 3.2vw, 2.4rem);
--fs-h3: clamp(1.25rem, 2vw, 1.6rem);
--fs-body: clamp(1rem, 1.1vw, 1.125rem);
--fs-small: 0.875rem;
/* --- Radios, sombras, espaciado --- */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 24px;
--r-pill: 999px; /* CTA redondeados (petición de Diego) */
--shadow-sm: 0 2px 8px rgba(16,52,97,.08);
--shadow-md: 0 10px 30px rgba(16,52,97,.12);
--shadow-lg: 0 24px 60px rgba(16,52,97,.18);
--ease: cubic-bezier(.22,.61,.36,1);
/* --- Motivo hexagonal (isotipo) reutilizable como clip-path --- */
--hex: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
/* NOTA — Fuentes: cargar en el del HTML (no aquí), p. ej.:
*/
/* CTA primario (azul) y secundario (naranja), ambos pill + bold + centrado */
.btn {
font-family: var(--font-display);
font-weight: 700;
border-radius: var(--r-pill);
padding: .9rem 1.8rem;
text-align: center;
border: 0;
cursor: pointer;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--primary { background: var(--azul); color:#fff; }
.btn--accent { background: var(--naranja); color:#fff; }
.btn--ghost { background: transparent; color:#fff; border:2px solid rgba(255,255,255,.6); }