/* =================================================================== tokens.css — base del motor de landing Las variables de color las sobrescribe el sitio desde su paleta, inyectadas en el . Aquí van los valores de respaldo. =================================================================== */ :root { /* ── Color ───────────────────────────────────────────────────── Paleta base tomada del material gráfico de Sistemas y Mapas. `primario` y `secundario` sostienen la jerarquía; `acento` aparece poco a propósito: marca la acción y nada más. */ --color-primario: #0B2545; /* tono profundo — títulos, fondo oscuro */ --color-secundario: #1B4F8C; /* tono medio — enlaces, apoyos */ --color-acento: #A8CF45; /* verde vivo — acento y acción */ --color-fondo: #F7F8F5; /* fondo claro, ligeramente verdoso */ --color-fondo-alterno: #E4E8E2; /* separadores, superficies */ --color-texto: #14202E; --color-texto-tenue: #5A6672; --color-blanco: #FFFFFF; /* Derivados: se calculan una vez y el resto del CSS solo los usa */ --fondo: var(--color-fondo); --sobre-fondo: var(--color-texto); --tenue: var(--color-texto-tenue); --linea: var(--color-fondo-alterno); /* ── Tipografía ──────────────────────────────────────────────── Tres roles, tres familias: · Archivo (Omnibus-Type) para títulos. Es una grotesca con eje de ancho, pensada para señalética latinoamericana; en su corte expandido evoca el rótulo de un plano. · Source Serif 4 para el cuerpo. Una serif en un producto de software es deliberadamente poco común: da peso institucional y separa la página del aire de plantilla SaaS. · IBM Plex Mono para etiquetas y cifras: números de lote, métricas, rótulos. Es la voz del dibujo técnico. */ --tipo-titulo: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --tipo-cuerpo: 'Source Serif 4', Georgia, serif; --tipo-tecnica: 'IBM Plex Mono', ui-monospace, monospace; --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 600; /* Escala mayor tercera (1.25) */ --paso--2: 0.75rem; --paso--1: 0.875rem; --paso-0: 1rem; --paso-1: 1.25rem; --paso-2: 1.5625rem; --paso-3: 1.9531rem; --paso-4: 2.4414rem; --paso-5: 3.0518rem; --paso-6: 3.8147rem; /* ── Espacio ───────────────────────────────────────────────── */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --contenido: 1180px; --contenido-angosto: 720px; --radio: 2px; /* casi recto: el vocabulario es de plano, no de app */ --radio-medio: 4px; --borde: 1px solid var(--linea); --transicion: 180ms cubic-bezier(.2, .6, .3, 1); } /* ── Reset mínimo ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--color-fondo); color: var(--color-texto); font-family: var(--tipo-cuerpo); font-size: var(--paso-0); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--tipo-titulo); font-weight: var(--peso-fuerte); line-height: 1.1; letter-spacing: -0.015em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } img { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 2px solid var(--color-secundario); outline-offset: 3px; } /* ── Envoltura de bloque ───────────────────────────────────────── */ .bloque { position: relative; } .bloque__contenido { width: 100%; max-width: var(--contenido); margin-inline: auto; padding-inline: var(--e-5); } .bloque--ancho-completo .bloque__contenido { max-width: none; } /* Espaciado vertical. Una sola declaración por clase para no pelear especificidades con los estilos propios de cada tipo de bloque. */ .esp--compacto { padding-block: var(--e-6); } .esp--normal { padding-block: var(--e-8); } .esp--amplio { padding-block: var(--e-9); } /* ── Fondos ──────────────────────────────────────────────────── Cada fondo redefine las variables semánticas, así el contenido no necesita saber sobre qué está parado y el contraste queda garantizado sin que nadie elija colores sueltos. */ .fondo--claro { --fondo: var(--color-fondo); --sobre-fondo: var(--color-texto); --tenue: var(--color-texto-tenue); --linea: var(--color-fondo-alterno); background: var(--fondo); color: var(--sobre-fondo); } .fondo--oscuro { --fondo: var(--color-primario); --sobre-fondo: #EEF2F6; --tenue: #93A6BC; --linea: rgba(255, 255, 255, .14); background: var(--fondo); color: var(--sobre-fondo); } .fondo--acento { --fondo: var(--color-secundario); --sobre-fondo: #FFFFFF; --tenue: #C3D6EC; --linea: rgba(255, 255, 255, .2); background: var(--fondo); color: var(--sobre-fondo); } .fondo--transparente { background: transparent; } /* ── Botones ───────────────────────────────────────────────────── */ .boton { display: inline-flex; align-items: center; gap: var(--e-2); font-family: var(--tipo-titulo); font-size: var(--paso-0); font-weight: var(--peso-medio); line-height: 1; padding: 0.95em 1.6em; border-radius: var(--radio); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background var(--transicion), color var(--transicion), border-color var(--transicion), transform var(--transicion); } .boton--primario { background: var(--color-acento); color: var(--color-primario); } .boton--primario:hover { background: #B8DC5C; transform: translateY(-1px); } .boton--secundario { background: transparent; color: var(--sobre-fondo); border-color: var(--sobre-fondo); } .boton--secundario:hover { background: var(--sobre-fondo); color: var(--fondo); } .boton--texto { background: transparent; color: var(--sobre-fondo); padding-inline: 0; border-bottom: 2px solid var(--color-acento); border-radius: 0; } .boton--texto:hover { color: var(--color-acento); } /* ── Rótulo técnico ──────────────────────────────────────────── El elemento firma del sistema: la etiqueta superior se compone como el bloque de título de un plano de lotificación. */ .rotulo { display: inline-flex; align-items: center; gap: var(--e-3); font-family: var(--tipo-tecnica); font-size: var(--paso--2); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue); } .rotulo::before { content: ''; width: 28px; height: 1px; background: var(--color-acento); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }