/* ==========================================================================
A3D · TOKENS DE IDENTIDAD — ficha viva de la marca (decisión #13)
--------------------------------------------------------------------------
Fuente única de tokens para las páginas de contenido DI (leads de
digitalización industrial) generadas en el Loop de Mejora de la Web DI.
Hereda y unifica lo YA usado en el repo:
- Paleta y radios/sombras/motion de assets/style.css (sistema --a3d-*)
- Valores de contenedor/easing ya validados en assets/home.css (--maxw:1080px,
--ease:cubic-bezier(.22,.61,.36,1) — coinciden exactamente, sin conflicto)
No sustituye a home.css/style.css (que siguen sirviendo header/footer/CTA de
las páginas existentes) — es la capa de tokens que faltaba con la
tipografía corporativa ya ratificada, para que todo contenido NUEVO nazca
coherente sin tener que redescubrir estos valores cada vez.
Tipografía corporativa (decisión #13, ratificada — NO renegociar aquí):
Trade Gothic Next LT Pro vía Adobe Fonts, kit utx5zsq. Incluir en el
de cada página que use estos tokens:
Familias servidas por el kit:
"a3d" — pesos 300 / 400 / 700 (+ itálicas)
"a3d-condensed" — pesos 400 / 700
Peso máximo en todo el sitio: 700 (no hay 800/900 en el kit — los
titulares "fuertes" van a 700, nunca a extra-bold sintético).
Uso: condensada para titulares y cifras grandes (H1/H2, stats, precios);
regular para cuerpo de texto, UI, formularios. Fallback Inter/system-ui
mientras carga el kit (evita FOIT largo, layout ya compatible por métrica).
Índice:
1. Paleta de marca
2. Neutros
3. Estados semánticos
4. Roles de texto / superficie
5. Tipografía (familias, escala, pesos, tracking)
6. Espaciado
7. Radios
8. Sombras
9. Layout (contenedores, gutter, alto de header)
10. Motion (easing, duración, focus ring)
11. Aplicación base (opcional — activa los tokens tipográficos)
========================================================================== */
:root {
/* ------------------------------------------------------------------------
1. PALETA DE MARCA — azul + cian técnico (decisión #13)
Mismos hex que assets/home.css (--blue/--accent) y assets/style.css
(--a3d-blue/--a3d-accent): un solo origen de verdad, tres nombres.
---------------------------------------------------------------------- */
--a3d-blue: #0C3FCC; /* corporativo principal */
--a3d-blue-700: #0A35AC; /* hover / estados activos */
--a3d-blue-800: #082B8C; /* fondos profundos */
--a3d-blue-900: #061F66; /* máximo contraste, hero oscuro */
--a3d-blue-300: #6E8FE6; /* acentos suaves */
--a3d-blue-100: #DCE4FA; /* fondos tintados, badges */
--a3d-blue-050: #EEF2FE; /* secciones alternas muy suaves */
--a3d-accent: #00B2D6; /* cian técnico — uso puntual (kicker, cifras) */
--a3d-accent-700: #008CAA;
--a3d-black: #0B0E16; /* oscuro de marca (theme-color, hero oscuro) */
/* ------------------------------------------------------------------------
2. NEUTROS
---------------------------------------------------------------------- */
--a3d-white: #FFFFFF;
--a3d-gray-050: #F7F8FA;
--a3d-gray-100: #EEF0F4;
--a3d-gray-200: #E1E5EC;
--a3d-gray-300: #CBD2DD;
--a3d-gray-400: #9AA4B4;
--a3d-gray-500: #6B7587;
--a3d-gray-600: #4C5567;
--a3d-gray-700: #343C4D;
--a3d-gray-800: #232A38;
--a3d-gray-900: #141926;
/* ------------------------------------------------------------------------
3. ESTADOS SEMÁNTICOS
---------------------------------------------------------------------- */
--a3d-success: #18A957;
--a3d-success-bg: #E4F6EC;
--a3d-warning: #C9810A;
--a3d-warning-bg: #FBF1DC;
--a3d-danger: #D23B3B;
--a3d-danger-bg: #FBE6E6;
/* ------------------------------------------------------------------------
4. ROLES DE TEXTO / SUPERFICIE
---------------------------------------------------------------------- */
--a3d-text: var(--a3d-gray-900);
--a3d-text-soft: var(--a3d-gray-600);
--a3d-text-mute: #616A7C; /* AA sobre superficies claras (>=4.5:1) */
--a3d-text-invert: var(--a3d-white);
--a3d-heading: var(--a3d-gray-900);
--a3d-bg: var(--a3d-white);
--a3d-bg-alt: var(--a3d-gray-050);
--a3d-bg-tint: var(--a3d-blue-050);
--a3d-surface: var(--a3d-white);
--a3d-border: var(--a3d-gray-200);
--a3d-border-strong: var(--a3d-gray-300);
/* ------------------------------------------------------------------------
5. TIPOGRAFÍA — Trade Gothic Next LT Pro (decisión #13)
---------------------------------------------------------------------- */
--a3d-font-sans: "a3d", "Inter", system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--a3d-font-cond: "a3d-condensed", var(--a3d-font-sans);
--a3d-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono",
Menlo, Consolas, monospace;
/* Escala tipográfica fluida (mobile-first, clamp) */
--a3d-fs-xs: 0.75rem; /* 12px — micro, disclaimers */
--a3d-fs-sm: 0.875rem; /* 14px */
--a3d-fs-base: 1rem; /* 16px — cuerpo */
--a3d-fs-md: 1.125rem; /* 18px */
--a3d-fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
--a3d-fs-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
--a3d-fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
--a3d-fs-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); /* H1 de página */
--a3d-fs-4xl: clamp(2.75rem, 1.8rem + 4.2vw, 4.5rem); /* H1 de hero */
/* Pesos — máximo 700 (el kit no trae 800/900) */
--a3d-fw-light: 300;
--a3d-fw-regular: 400;
--a3d-fw-bold: 700;
--a3d-lh-tight: 1.08; /* condensed en titulares */
--a3d-lh-snug: 1.28;
--a3d-lh-normal: 1.55; /* cuerpo */
--a3d-lh-relaxed:1.7;
--a3d-tracking-tight: -0.01em; /* condensed ya es "estrecha" de por sí */
--a3d-tracking-wide: 0.04em;
--a3d-tracking-caps: 0.08em; /* kickers / eyebrows en mayúsculas */
/* ------------------------------------------------------------------------
6. ESPACIADO (escala de 4px)
---------------------------------------------------------------------- */
--a3d-sp-1: 0.25rem;
--a3d-sp-2: 0.5rem;
--a3d-sp-3: 0.75rem;
--a3d-sp-4: 1rem;
--a3d-sp-5: 1.25rem;
--a3d-sp-6: 1.5rem;
--a3d-sp-7: 1.75rem;
--a3d-sp-8: 2rem;
--a3d-sp-10: 2.5rem;
--a3d-sp-12: 3rem;
--a3d-sp-16: 4rem;
--a3d-sp-20: 5rem;
--a3d-sp-24: 6rem;
--a3d-sp-32: 8rem;
/* ------------------------------------------------------------------------
7. RADIOS
Nota: home.css usa un único --radius:14px (equivalente a --a3d-radius-md
de aquí). Las páginas de contenido nuevas pueden usar la escala completa.
---------------------------------------------------------------------- */
--a3d-radius-sm: 4px;
--a3d-radius: 8px;
--a3d-radius-md: 12px;
--a3d-radius-lg: 16px;
--a3d-radius-xl: 24px;
--a3d-radius-pill:999px;
/* ------------------------------------------------------------------------
8. SOMBRAS (sutiles, industrial-clean)
---------------------------------------------------------------------- */
--a3d-shadow-xs: 0 1px 2px rgba(11, 14, 22, 0.06);
--a3d-shadow-sm: 0 1px 3px rgba(11, 14, 22, 0.08), 0 1px 2px rgba(11, 14, 22, 0.04);
--a3d-shadow: 0 4px 12px rgba(11, 14, 22, 0.08), 0 2px 4px rgba(11, 14, 22, 0.05);
--a3d-shadow-md: 0 10px 28px rgba(11, 14, 22, 0.10), 0 4px 10px rgba(11, 14, 22, 0.06);
--a3d-shadow-lg: 0 20px 50px rgba(11, 14, 22, 0.14), 0 8px 18px rgba(11, 14, 22, 0.08);
--a3d-shadow-blue: 0 12px 30px rgba(12, 63, 204, 0.22);
/* ------------------------------------------------------------------------
9. LAYOUT
--a3d-container coincide con --maxw:1080px de home.css (mismo valor,
mismo sistema de grilla en toda la web).
---------------------------------------------------------------------- */
--a3d-container: 1080px;
--a3d-container-narrow: 820px;
--a3d-container-wide: 1360px;
--a3d-gutter: clamp(1.25rem, 4vw, 2.5rem);
--a3d-header-h: 72px;
/* ------------------------------------------------------------------------
10. MOTION
--a3d-ease coincide con --ease de home.css (mismo cubic-bezier: no hay
dos sistemas de animación conviviendo, es el mismo con otro nombre).
---------------------------------------------------------------------- */
--a3d-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--a3d-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--a3d-transition: 180ms var(--a3d-ease);
--a3d-transition-slow: 320ms var(--a3d-ease-out-expo);
--a3d-focus: 0 0 0 3px rgba(12, 63, 204, 0.35);
}
/* ==========================================================================
11. APLICACIÓN BASE (opcional)
Solo enlaza los tokens tipográficos a los elementos de texto. NO es un
reset (ese ya vive en home.css/style.css según qué página lo use) — evita
que cada página nueva tenga que reescribir font-family a mano.
========================================================================== */
body {
font-family: var(--a3d-font-sans);
font-weight: var(--a3d-fw-regular);
line-height: var(--a3d-lh-normal);
color: var(--a3d-text);
}
h1, h2, h3,
.a3d-cifra /* cifras grandes: stats, precios, anclas de ROI */ {
font-family: var(--a3d-font-cond);
font-weight: var(--a3d-fw-bold);
line-height: var(--a3d-lh-tight);
letter-spacing: var(--a3d-tracking-tight);
font-variant-numeric: tabular-nums; /* aplica solo a cifras, inocuo en texto */
/* Sin `color` a propósito: los titulares heredan el color de su sección
(clara u oscura). Forzarlo aquí rompería el patrón ya usado en todo el
repo donde .sec--dark/.sec--accent ponen color:#fff en el contenedor y
el H1/H2 hijo lo hereda — un color aquí ganaría siempre a esa herencia
por ser una propiedad puesta directamente sobre el propio elemento. */
}
.a3d-kicker {
display: inline-block;
font-family: var(--a3d-font-sans);
font-size: var(--a3d-fs-xs);
font-weight: var(--a3d-fw-bold);
letter-spacing: var(--a3d-tracking-caps);
text-transform: uppercase;
color: var(--a3d-accent); /* pensado para fondo oscuro/azul, como .kicker de home.css */
}
/* AA sobre fondo BLANCO: el cian de marca da ~2.5:1 (insuficiente). Si el
kicker cae sobre una superficie clara, sobrescribe el color a
var(--a3d-blue) en el