/* ==========================================================================
base.css — reset, tipografía base, links, i18n, reveal, media slots
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html,
body {
margin: 0;
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-body-s);
line-height: 1.7;
}
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
button {
font: inherit;
color: inherit;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
a {
color: var(--ink);
text-decoration: none;
transition: color var(--d-hover) ease;
}
/* Foco visible: sólo para navegación por teclado. */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
.on-ink :focus-visible { outline-color: var(--white); }
/* Salto al contenido, visible sólo al enfocarlo. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--ink);
color: var(--white);
padding: 10px 18px;
border-radius: var(--radius-pill);
font-size: var(--fs-meta);
}
.skip-link:focus-visible { left: var(--s-3); top: var(--s-3); }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------------
Tipografía — roles
-------------------------------------------------------------------------- */
.display { font-family: var(--font-display); }
.h1-home {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h1-home);
line-height: 1;
letter-spacing: var(--track-tight);
white-space: nowrap;
text-align: center;
}
.h1-case {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h1-case);
line-height: 1;
letter-spacing: var(--track-tight);
max-width: 22ch;
}
.h1-page {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h1-page);
line-height: 1;
letter-spacing: -0.03em;
}
.h1-about {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h1-about);
line-height: 1.2;
letter-spacing: -0.025em;
max-width: 26ch;
}
.h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h2);
line-height: 1.14;
letter-spacing: var(--track-h2);
}
.h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h3);
line-height: 1.3;
}
.lead {
font-size: var(--fs-lead);
line-height: 1.6;
max-width: var(--measure-lead);
}
.body {
font-size: var(--fs-body);
line-height: 1.75;
max-width: var(--measure-body);
}
.body--muted { color: var(--muted); }
.body-s {
font-size: var(--fs-body-s);
line-height: 1.7;
max-width: var(--measure-process);
}
.body-s--muted { color: var(--muted); }
.caption {
font-size: var(--fs-caption);
line-height: 1.6;
color: var(--muted);
}
.label {
font-size: var(--fs-label);
letter-spacing: var(--track-label);
text-transform: uppercase;
color: var(--muted);
}
.label--s {
font-size: var(--fs-label-s);
letter-spacing: var(--track-label-s);
}
/* Los numerales 00–05: mismo tamaño y grosor que el resto de labels,
sólo cambia el color. */
.label--num { color: var(--accent); }
.num-tabular { font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }
.strong-ink { color: var(--ink); }
/* --------------------------------------------------------------------------
i18n — conmutación por CSS
El copy final EN/ES vive en el markup (bueno para SEO y sin JS).
El estado único lo lleva el atributo lang de ; i18n.js sólo lo cambia.
-------------------------------------------------------------------------- */
[data-i18n] { display: none; }
html[lang="en"] [data-i18n="en"],
html[lang="es"] [data-i18n="es"] { display: inline; }
/* --------------------------------------------------------------------------
Reveal en scroll (CONTEXT.md §6.1)
Sistema INDEPENDIENTE de las animaciones de imagen (.media-slot).
Actúa sólo sobre textos y cards marcados con [data-reveal].
El estado inicial oculto se aplica únicamente si hay JS (clase .js en ,
puesta por el snippet del ): sin JS el contenido se ve, no desaparece.
-------------------------------------------------------------------------- */
.js [data-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--d-reveal) var(--ease),
transform var(--d-reveal) var(--ease);
}
.js [data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
/* --------------------------------------------------------------------------
MEDIA SLOTS — ver la convención completa al inicio de tokens.css
El contenedor manda: recorte, radio y tamaño. El ![]()
sólo rellena.
Sin borde: las imágenes van a sangre contra el fondo.
El rayado a 135° es el placeholder de la spec: se ve mientras el asset real
no exista y desaparece bajo la imagen en cuanto llegue.
-------------------------------------------------------------------------- */
.media-slot {
position: relative;
width: 100%;
overflow: hidden;
border-radius: var(--radius);
background: var(--stripe);
}
/* Etiqueta mono con el nombre de archivo esperado, encima del rayado.
Queda debajo de la imagen real (z-index), así que se oculta sola. */
.media-slot::after {
content: attr(data-file);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 0;
font-family: var(--font-mono);
font-size: var(--fs-mono);
letter-spacing: var(--track-mono);
color: var(--muted);
background: var(--label-bg);
padding: 8px 12px;
border-radius: var(--radius-pill);
text-align: center;
pointer-events: none;
max-width: calc(100% - 24px);
}
.media-slot > img,
.media-slot > video,
.media-slot > .lottie {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
}
/* PROVISIONAL — pareja de js/media.js. Mientras el archivo real no exista, el
![]()
roto pintaría su alt encima del rayado; se oculta para que se lea el
placeholder. Borrable junto con media.js cuando lleguen las imágenes. */
.media-slot.is-missing > img { display: none; }
/* Variante sobre el bloque 03 (fondo negro). */
.on-ink .media-slot {
background: var(--stripe-on-ink);
}
.on-ink .media-slot::after {
color: var(--on-ink-mono);
background: var(--label-bg-on-ink);
font-size: var(--fs-label);
padding: 6px 10px;
}
/* --------------------------------------------------------------------------
Tamaños de slot — los 58 assets del inventario (CONTEXT.md §7).
Las proporciones son las del prototipo, extraídas archivo por archivo.
La clase es EXACTAMENTE el nombre base del archivo. Como muchas empiezan por
dígito (`01-hero-…`) —lo cual es válido en el atributo class de HTML pero no
como selector `.clase` en CSS sin escapes— se seleccionan con `[class~="…"]`.
Misma especificidad que una clase, y el nombre queda legible y literal.
Sustituir una imagen por su Lottie no toca ninguna de estas reglas.
-------------------------------------------------------------------------- */
/* Cards de Work — 4:5. La imagen ES la tarjeta: sin marco extra ni sombra. */
.settings-dashboard,
.business-models,
.reports-dashboard,
.mediblas-chat,
.humman-app {
aspect-ratio: 4 / 5;
min-width: 280px;
min-height: 320px;
max-height: 560px;
max-width: 460px;
}
/* 16:9 — heros de caso y planos de contexto */
[class~="01-hero-dashboard-final"],
[class~="01-el-antes-arbol-menus"],
[class~="02-hero-listado-modelos"],
[class~="02-flujo-roto-antes"],
[class~="03-hero-dashboard-informes"],
[class~="03-el-antes-graficas-vacias"],
[class~="03-auditoria-pantallas"],
[class~="04-hero-mediblas-light-dark"],
[class~="05-hero-humman-dashboard"],
[class~="05-contexto-sector"] { aspect-ratio: 16 / 9; }
/* 16:10 — la pantalla final de cada bloque 04 */
[class~="01-dashboard-completo"],
[class~="02-flujo-creacion-completo"],
[class~="03-dashboard-completo"],
[class~="04-flujo-consulta-prioritaria"],
[class~="05-dashboard-inicio"] { aspect-ratio: 16 / 10; }
/* 4:3 — pares de proceso y piezas del bloque 03 */
[class~="01-arquitectura-informacion"],
[class~="01-wireframes-lofi"],
[class~="01-impuestos-reticula"],
[class~="01-resoluciones-medidores"],
[class~="01-panel-lateral-accesos"],
[class~="02-board-fases"],
[class~="02-work-flow-creacion"],
[class~="02-stepper-lateral"],
[class~="02-creacion-inline-conceptos"],
[class~="02-tarjetas-resumen"],
[class~="02-selector-formatos"],
[class~="03-user-persona-camilo"],
[class~="03-user-persona-andrea"],
[class~="03-barra-kpis"],
[class~="03-modal-tabla-detalle"],
[class~="04-task-user-flow"],
[class~="04-wireframes-mobile-desktop"],
[class~="04-escalas-color-contraste"],
[class~="04-chat-adjunto-diagnostico"],
[class~="05-user-persona-ana"],
[class~="05-journey-map"],
[class~="05-widgets-modulares"],
[class~="05-panel-agenda"],
[class~="05-wireframes-flujo-vacante"],
[class~="05-design-system-humman"] { aspect-ratio: 4 / 3; }
/* 3:2 — tríos de estado y piezas menores */
[class~="01-estado-primer-ingreso"],
[class~="01-estado-poca-informacion"],
[class~="01-estado-poblado"],
[class~="01-conceptos-kpi-cards"],
[class~="01-onboarding-usetiful"],
[class~="02-informacion-general"],
[class~="02-estado-vacio-conceptos"],
[class~="03-burbujas-leads"],
[class~="03-donut-campanas"],
[class~="03-barras-apiladas-medios"] { aspect-ratio: 3 / 2; }
/* 3:4 — mockups verticales y retrato */
[class~="04-mobile-light"],
[class~="04-mobile-dark"],
.about-retrato-plano-medio { aspect-ratio: 3 / 4; }
/* --------------------------------------------------------------------------
Movimiento reducido — CONTEXT.md §2 y §6: todo el movimiento se desactiva.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.js [data-reveal] {
opacity: 1;
transform: none;
}
}