/* ============================================================================= ASCOR SECURITY — Design Tokens Fuente: Manual de Marca + Manual Visual de Contenido v1.0 Paleta "Autoridad marino" · Proporción 56% marino / 22% azul / 14% plomo / 8% royal ========================================================================== */ :root { /* --- Marca ------------------------------------------------------------ */ --marino: #0A1124; /* Marino Autoridad — fondo base */ --azul: #16306B; /* Azul Institucional — superficies */ --royal: #3D5AFE; /* Royal Señal — acento / palabra-acento */ --plomo: #6B7280; /* Gris Plomo — técnico / dato */ --blindaje: #111827; /* Negro Blindaje — contraste */ --claridad: #FFFFFF; /* Blanco Claridad — texto */ /* --- Escalas derivadas ------------------------------------------------ */ /* Los cinco tokens de arriba son la paleta del manual y se dejan declarados aunque el CSS use las escalas: son la referencia de marca, no código muerto. Las escalas sí se podan cuando dejan de usarse. */ --marino-900: #060B18; --marino-800: #0A1124; --marino-700: #0E1830; --azul-600: #16306B; --royal-500: #3D5AFE; --royal-400: #6B80FE; --royal-300: #9AAAFF; /* --- Roles semánticos ------------------------------------------------- */ --bg: var(--marino-800); --bg-elevated: #0E1830; --text: #FFFFFF; --text-muted: #A8B3C7; /* 8.88:1 sobre --bg · 8.34:1 sobre --bg-elevated */ --text-subtle: #7F8CA3; /* 5.53:1 sobre --bg · 5.19:1 sobre --bg-elevated */ --text-on-royal: #FFFFFF; /* 5.13:1 sobre --royal-500 */ --border: rgba(255, 255, 255, 0.10); /* Divisor de lista: la única línea que queda en el sistema. Separa filas sin dibujar una caja alrededor de cada una. 0.5px se redondea a 1 dispositivo físico en pantallas de densidad 2x y 3x, que es todo el móvil actual. */ --divisor: rgba(255, 255, 255, 0.07); /* Borde de campo de formulario. Va como token y no escrito a mano en la regla para que el bloque `prefers-contrast: more` del final pueda reforzarlo: es la única señal que delimita un campo, ahora que el fondo es apenas un 5% de blanco. */ --borde-campo: rgba(255, 255, 255, 0.12); /* Tinte de ícono: el círculo de 42px que acompaña a cada fila. Mezclado sobre --bg da #121C45; el royal-300 encima mide 7.50:1. */ --tinte-royal: rgba(61, 90, 254, 0.15); --tinte-azul: rgba(22, 48, 107, 0.35); --focus: #9AAAFF; --success: #2FBF71; --danger: #FF5C6C; --warning: #F4B740; /* --- Overlay marino (receta del manual) ------------------------------- Aligerado en el rediseño para que las fotos respiren: se pedía bajar los marinos ~25% y que se vieran rostros y contexto en vez de una mancha azul. Se bajó donde NO hay texto y se dejó firme el ancla inferior: parada superior 0.88 → 0.66 (-25%) parada media 0.62 → 0.44 (-29%) parada 45% 0.72 → 0.62 (-14%) parada inferior 0.97 → 0.94 (-3%) Ese último valor es el que sostiene el h1 del hero, que se apoya abajo. El contraste de texto sobre fotografía no es auditable por código —depende de la imagen— así que bajarlo un cuarto a ciegas era apostar la legibilidad del titular principal de la portada. Al reemplazar una foto hay que volver a mirarlo a ojo. */ --overlay-bottom: linear-gradient( to top, rgba(10, 17, 36, 0.94) 0%, rgba(10, 17, 36, 0.72) 28%, rgba(10, 17, 36, 0.36) 58%, rgba(10, 17, 36, 0.10) 100% ); --overlay-full: linear-gradient( to top, rgba(10, 17, 36, 0.94) 0%, rgba(10, 17, 36, 0.62) 45%, rgba(10, 17, 36, 0.44) 75%, rgba(10, 17, 36, 0.66) 100% ); /* --- Tipografía ------------------------------------------------------- */ --font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Monoespaciada SOLO para fragmentos de código en las páginas legales (`localStorage`, `assets/js/config.js`). Fue la tipografía de los kickers, las cifras y los subtextos técnicos hasta el rediseño de agosto de 2026; ahí se eliminó de toda la interfaz porque la mayúscula monoespaciada con tracking amplio es justo lo que le daba al sitio el aire robótico. Al quedar en un solo uso decorativo se dejó de pedir IBM Plex Mono a Google Fonts: una petición menos y la del sistema se ve igual en un ``. */ --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Escala fluida — mobile-first, clamp() sin media queries. Los titulares topan alrededor de los 1370–1420px: pasado ese ancho el tamaño ya no crece, porque en un sitio corporativo la tipografía enorme se lee como plantilla genérica y no como autoridad. --fs-base NO baja: su tope de 1rem es el tamaño de lectura de referencia y el mínimo que evita que Safari en iOS haga zoom al enfocar un campo del formulario. Bajan los titulares; el texto que se lee, no. */ /* Antetítulo: 13px fijo. Reemplazó al kicker monoespaciado de 10–11px en mayúsculas. Sube de tamaño porque ya no grita: en minúscula tipo oración y sin tracking necesita cuerpo suficiente para leerse como una frase. */ --fs-eyebrow: 0.8125rem; /* 13px */ --fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8rem); /* 12–12.8px */ --fs-sm: clamp(0.844rem, 0.83rem + 0.08vw, 0.875rem); /* 13.5–14px */ /* Título de fila de lista: 15px en móvil, 17px en escritorio. La jerarquía de una lista fluida la dan el ícono y el divisor, no el tamaño de la letra. */ --fs-fila: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15–17px */ /* CALIBRADO CONTRA SITIOS CORPORATIVOS REALES (agosto 2026). * * Se midió el font-size computado a 1440px en apple, microsoft, stripe, ibm, * deloitte y —del mismo rubro— securitas y prosegur. Resultado: los SIETE * usan 16px de cuerpo, ninguno baja de ahí, y sus h1 van de 40 a 54px. * Estos tokens son esa mediana, no una estimación. * * Si alguien vuelve a pedir "más chico", el dato que hay que poner sobre la * mesa es ese: por debajo de 16px el sitio ya no se parece a una empresa * grande, se parece a un documento. */ --fs-base: 1rem; /* 16px, como los siete */ --fs-lg: clamp(1rem, 0.956rem + 0.19vw, 1.125rem); /* 16–18px */ --fs-xl: clamp(1.063rem, 0.997rem + 0.28vw, 1.25rem); /* 17–20px */ /* EL PISO DE --fs-h3 YA NO ES UNA RESTRICCIÓN DE CONTRASTE — leer antes de tocar la palabra-acento. Hasta el rediseño de agosto de 2026 este token tenía un mínimo clavado en 1.188rem (19px) por una razón medida: la palabra-acento usaba Royal Señal (#3D5AFE), que da 3.66:1 sobre el marino. Con peso 800, WCAG considera "texto grande" todo lo que llegue a 18.66px y ahí el umbral baja de 4.5:1 a 3:1 — a 19px pasaba, a 18px fallaba. El rediseño movió la palabra-acento a --royal-400 (#6B80FE), que mide 5.49:1 sobre --bg y 5.15:1 sobre --bg-elevated: cumple AA como texto normal a CUALQUIER tamaño. Por eso los titulares pueden bajar sin tocar el color. Lo que sigue en pie: dentro de la tarjeta CTA, cuyo fondo es --azul-600, royal-400 cae a 3.68:1. Ahí la palabra-acento usa --royal-300 (5.73:1). Ver .cta-tarjeta en components.css. */ --fs-h3: clamp(1.0625rem, 1.007rem + 0.24vw, 1.25rem); /* 17–20px */ --fs-h2: clamp(1.375rem, 1.29rem + 0.36vw, 1.625rem); /* 22–26px */ --fs-h1: clamp(1.875rem, 1.655rem + 0.94vw, 2.5rem); /* 30–40px */ --fs-hero: clamp(1.875rem, 1.611rem + 1.13vw, 2.625rem); /* 30–42px */ /* Interlineado apretado en agosto 2026: a igual tamaño de letra, bajar el cuerpo de 1.62 a 1.5 recorta ~7% del alto de cada párrafo. Es la ganancia de espacio más barata que existe. No se baja de 1.5: es el valor que WCAG usa de referencia para espaciado de texto y por debajo la lectura sufre más de lo que se gana. */ --lh-tight: 1.08; --lh-heading: 1.18; --lh-snug: 1.45; --lh-body: 1.50; /* el interlineado de microsoft, ibm, prosegur y deloitte */ --tracking-display: -0.02em; /* --- Espaciado (escala 4px) ------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; /* Ritmo vertical de sección, fluido. Baja junto con los titulares a propósito: si solo se achica el texto, las secciones quedan con demasiado aire y el sitio se ve vacío. Ver también el bloque de pantallas bajas más abajo. El mínimo es lo que manda en móvil, y ahí cada píxel se paga con scroll: a 390px este valor se aplica arriba y abajo de CADA sección, así que bajarlo 8px ahorra 16px por sección y más de 100px en la portada. */ /* Bajado en agosto 2026: en 1920px eran 64px arriba y 64 abajo de CADA sección, y la portada llegaba a 5,9 pantallas de scroll. Ahora 28–48px. */ --section-y: clamp(1.75rem, 1.31rem + 1.88vw, 3rem); --gutter: clamp(1.25rem, 0.95rem + 1.5vw, 2.5rem); /* Gutter ÚNICO para todas las grillas. Antes .grid, .steps y .gallery usaban tres gaps distintos, así que las columnas de una sección no coincidían con las de la siguiente. Un solo token = una sola retícula en toda la página. */ --gap: clamp(0.875rem, 0.7rem + 0.85vw, 1.5rem); --container: 1160px; --container-narrow: 720px; /* Medida de lectura — tres valores para todo el sitio. Antes convivían siete anchos distintos en ch (74/72/62/56/54/52/38), así que cada bloque de texto terminaba en una columna diferente y nada parecía alineado. */ --measure: 66ch; /* párrafos y leads por defecto */ --measure-narrow: 52ch; /* bajadas, texto centrado, CTA */ --measure-wide: 74ch; /* cabeceras de sección y prosa legal */ /* --- Formas ----------------------------------------------------------- Escala de radios del rediseño. La regla es que nada cuadrado sobreviva: el radio más chico del sistema es 16px (campos de formulario) y el más grande es la píldora. Un rectángulo de esquina viva ya no existe. */ --radius-sm: 12px; /* controles chicos: hamburguesa, cerrar, foco */ --radius-campo: 16px; /* campos de formulario */ --radius-foto: 20px; /* fotos de galería */ --radius-card: 24px; /* tarjeta CTA */ --radius-media: 28px; /* marco de video y del calendario de GHL */ --radius-surface: 40px; /* curva superior de las bandas de sección */ --radius-pill: 999px; /* botones, chips */ /* Máscara orgánica de las fotos de contenido. Dos variantes que se alternan para que dos imágenes seguidas no repitan la misma silueta. */ --mascara-a: 120px 32px 120px 32px; --mascara-b: 32px 120px 32px 120px; --bar-accent-w: 3px; /* barra acento royal a la izquierda */ --bar-offset: clamp(0.75rem, 0.6rem + 0.7vw, 1.125rem); /* separación al texto, siempre < --gutter */ /* --- Piezas de las listas y líneas de tiempo -------------------------- */ --circulo-icono: 42px; /* círculo con tinte que acompaña a cada fila */ --nodo: 44px; /* nodo de la línea de tiempo */ /* --- Sombras ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55); --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.7); /* --- Movimiento ------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 520ms; /* --- Capas ------------------------------------------------------------ */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-float: 400; --z-modal: 500; /* --- Alturas seguras (iOS notch / Android gesture bar) ---------------- */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --header-h: 64px; --tap-min: 44px; /* mínimo táctil Apple HIG / Material */ } @media (min-width: 1024px) { :root { --header-h: 76px; } } /* ----------------------------------------------------------------------------- SEGUNDA RAMPA — la escala de escritorio (agosto 2026, corrección de PC) POR QUÉ HAY UNA SEGUNDA RAMPA Y NO SE SUBIÓ EL TOPE DE LOS CLAMP DE ARRIBA La escala móvil-primero de :root es una sola recta que arranca en 320px y topa alrededor de los 1370px. Subir solo el tope de esos clamp no sirve: la recta conserva su pendiente, así que a 1440px el h1 seguiría midiendo ~41px y solo crecería en anchos que casi nadie tiene. Subir la pendiente sí agranda el escritorio, pero agranda también todo el tramo intermedio y contamina el móvil, que está calibrado y no se toca. Por eso desde 1024px empieza una recta NUEVA. Cada token arranca exactamente en el valor que la rampa móvil entregaba a 1024px —así no hay salto al cruzar el punto de reflujo— y sube hasta su tope a 1600px. El calibrado es el mismo de la nota de --fs-base: los siete sitios corporativos medidos usan 16px de cuerpo y h1 de 40 a 54px A 1440px. El sitio estaba clavado en el PISO de ese rango (h1 40px y solo en el ancho máximo, h2 26px), y por eso en PC se leía como un documento y no como una empresa. Esta rampa lo deja en el centro: a 1440px h1 ~45px y h2 ~31px; de 1600px en adelante, 48 y 34. -------------------------------------------------------------------------- */ @media (min-width: 1024px) { :root { /* Cuerpo: 16px a 1024 → 17px a 1600. Los 16px de la nota de arriba son un PISO, no un techo, y en un monitor la distancia de lectura es mayor que en un teléfono. El piso sigue intacto donde importa: en móvil, que es donde Safari hace zoom al enfocar un campo por debajo de 16px. */ --fs-base: clamp(1rem, 0.889rem + 0.174vw, 1.0625rem); --fs-xs: clamp(0.8rem, 0.756rem + 0.069vw, 0.844rem); /* 12.8 → 13.5 */ --fs-sm: clamp(0.875rem, 0.709rem + 0.26vw, 0.969rem); /* 14 → 15.5 */ --fs-fila: clamp(1.028rem, 0.8rem + 0.356vw, 1.156rem); /* 16.5 → 18.5 */ --fs-lg: clamp(1.078rem, 0.884rem + 0.304vw, 1.1875rem); /* 17.3 → 19 */ --fs-xl: clamp(1.188rem, 0.938rem + 0.391vw, 1.375rem); /* 19 → 22 */ --fs-h3: clamp(1.163rem, 0.896rem + 0.417vw, 1.313rem); /* 18.6 → 21 */ --fs-h2: clamp(1.52rem, 0.441rem + 1.684vw, 2.125rem); /* 24.3 → 34 */ --fs-h1: clamp(2.25rem, 0.917rem + 2.083vw, 3rem); /* 36 → 48 */ --fs-hero: clamp(2.375rem, 0.375rem + 3.125vw, 3.5rem); /* 38 → 56 */ /* El contenedor de 1160px es el ancho de un notebook, no el de un monitor. En 1920px dejaba unos 380px de marino muerto a cada lado y el contenido se leía como una isla centrada. Quien limita la línea de lectura es --measure, no el contenedor, así que ensancharlo no descuadra la prosa: solo deja de desperdiciar la pantalla. ES UN `min()` CON UN PORCENTAJE, NO UN `clamp()` CON UN MÍNIMO EN PÍXELES. El primer intento fue `clamp(1280px, 1160px + 15vw, 1400px)` y en 1366px —el notebook más común— daba 1365: el contenedor tocaba los dos bordes de la pantalla y lo único que separaba el texto del filo era el gutter. Un mínimo en píxeles no puede garantizar margen, porque no sabe cuánta pantalla hay. El 92vw sí: siempre deja un 4% a cada lado, y el tope de 1400px es el que evita que en 2560px la línea se vuelva ilegible. */ --container: min(1400px, 92vw); /* Con titulares más grandes, los 48px de aire que venían del ajuste móvil quedaron cortos: dos secciones seguidas se leían como una sola. */ --section-y: clamp(3.25rem, 1.031rem + 3.472vw, 4.5rem); /* 52 → 72 */ } } /* ----------------------------------------------------------------------------- RITMO VERTICAL EN PANTALLAS BAJAS — por qué existe este bloque Toda la escala del sitio responde al ANCHO, vía vw. Eso funciona bien salvo en un caso muy común: el notebook, que es ancho pero bajo (1366×768, 1536×864, 1600×900). Esas pantallas caen en la parte alta de la rampa y reciben el ritmo vertical pensado para un monitor grande, pero con un tercio del alto para gastarlo. El resultado es que la página "se siente enorme": con --section-y en su tope, entre dos secciones hay ~168px de aire en una pantalla de 768px de alto. Aquí se comprime SOLO el eje vertical. El tamaño de letra no se toca a propósito: achicarlo por altura de pantalla perjudica la legibilidad y no es lo que hace que la página se sienta grande. OJO al leer esto en seis meses: este bloque NO aplica en monitores altos (1080p o más). Ahí el sitio usa el valor mayor de --section-y y el aire entre secciones es notoriamente más grande que en un notebook. Es intencional, no un bug — pero conviene revisarlo en una pantalla alta antes de dar por buena cualquier decisión de espaciado tomada en un notebook. -------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-height: 940px) { :root { /* Subido junto con la segunda rampa: este bloque comprime el ritmo del notebook respecto del monitor, no lo devuelve al valor del móvil. Con titulares de escritorio, 28px de aire dejaban de leerse como densidad y pasaban a leerse como secciones pegadas. */ --section-y: clamp(2.5rem, 1.2rem + 2.03vw, 3.25rem); --sp-9: 3rem; } } /* Respeta la preferencia del sistema por menos movimiento */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } } /* Modo alto contraste. Refuerza las tres líneas que el rediseño dejó muy tenues a propósito: el divisor de las listas, el borde de los campos y los filetes que quedan. */ @media (prefers-contrast: more) { :root { --text-muted: #D5DDEA; --text-subtle: #B4BECE; --border: rgba(255, 255, 255, 0.24); --divisor: rgba(255, 255, 255, 0.28); --borde-campo: rgba(255, 255, 255, 0.45); } }