/* ============================================================================
* 3ZIK — hoja de estilos única
* Sistema visual: constelación flotando sobre terciopelo negro.
*
* Traducido del documento de referencia de Dala (3zik.web.md) a la marca de
* 3ZIK. Lo que se respeta del original:
* · Negro PURO (#000000) como única superficie. Los paneles, tarjetas,
* bordes, sombras y degradados de interfaz están prohibidos: el vacío es
* el diseño y la jerarquía la dan la escala y el espacio, no los marcos.
* · Titulares a peso 400 —nunca negrita— a tamaños enormes con tracking
* negativo. El cuerpo va a peso 200 (ultraligero), que es la firma.
* · Un solo acento saturado reservado a la acción.
* · Rejilla de filetes de 1px al 10% SOLO donde hace falta un límite real
* (un campo de formulario, una tabla, la rejilla de logos). Es la única
* concesión y está marcada como tal.
*
* Lo que se cambió respecto a Dala, por decisión del cliente:
* · El acento es el ámbar del manual de 3ZIK (#fec806), medido sobre los
* archivos originales. La marca tiene tres colores y no se inventa un cuarto.
* · La tipografía es Inter auto-hospedada (PPNeueMontreal es comercial),
* tal y como el propio documento recomienda como sustituto.
*
* Sin dependencias, sin build, sin CDN. Un archivo, todo el sitio.
* ==========================================================================*/
/* ------------------------------------------------------------------ fuente */
/* Inter variable: un solo archivo de 352 KB cubre los pesos 100–900, así que
* el 200 del cuerpo y el 400 de los titulares salen del mismo recurso.
* Licencia SIL OFL 1.1 — se puede redistribuir (ver assets/fonts/OFL.txt). */
@font-face {
font-family: "Inter var";
src: url("fonts/InterVariable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* ----------------------------------------------------------------- tokens */
/* Paleta tomada del manual de marca, medida sobre los archivos originales:
* negro #000000, blanco #ffffff y ámbar #fec806. No hay un cuarto color, así
* que todo lo que antes era verde o violeta es ahora el ámbar de la marca. */
:root {
/* Superficies. Nivel 0 = el vacío; no hay niveles 1 ni 2 de superficie. */
--void: #000000;
/* Texto */
--bone: #ffffff; /* titulares y cuerpo principal */
--ash: #9a9a9a; /* texto secundario, enlaces en reposo, etiquetas */
--mist: #bdbdbd; /* cuerpo de apoyo, el gris legible más callado */
/* El único acento: el ámbar del manual. */
--accent: #fec806;
--accent-ink: #000000; /* texto sobre el ámbar: 13.4:1 medido */
--accent-soft: #ffd83d; /* un paso más claro, solo para hover */
--accent-dim: #c99a00; /* un paso más oscuro, para bordes y detalles */
/* La puntuación cálida es el mismo ámbar: la marca no tiene otro color. */
--spark: var(--accent);
/* Rejilla de filetes: la única concesión estructural del sistema. */
--rule: rgba(255, 255, 255, .10);
--rule-soft: rgba(255, 255, 255, .06);
/* Tipografía */
--sans: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--w-thin: 200; /* cuerpo: la firma del sistema */
--w-base: 400; /* TODO titular, por grande que sea */
--w-semi: 600; /* etiquetas y navegación */
/* Escala tipográfica. Los máximos son los del documento (113px display);
* el clamp los baja en pantallas pequeñas sin romper el ritmo. */
--t-display: clamp(3.25rem, 10.5vw, 7.0625rem); /* 113px */
--t-h-lg: clamp(2.5rem, 7.4vw, 4.875rem); /* 78px */
--t-h: clamp(2rem, 5vw, 3rem); /* 48px */
--t-h-sm: clamp(1.75rem, 4.2vw, 2.625rem); /* 42px */
--t-sub: clamp(1.625rem, 3.4vw, 2.25rem); /* 36px */
--t-h-xs: 1.6875rem; /* 27px */
--t-h-2xs: 1.5rem; /* 24px */
--t-body: 1.125rem; /* 18px */
--t-label: 0.875rem; /* 14px */
--t-caption: 0.75rem; /* 12px */
--lh-display: 1.02;
--lh-heading: 1.1;
--lh-body: 1.5;
/* El tracking negativo crece con el tamaño; en em se adapta solo al clamp. */
--tr-display: -0.045em;
--tr-heading: -0.035em;
--tr-h-2xs: -0.02em;
--tr-label: 0.025em;
/* Espaciado: unidad de 6px */
--s1: 6px; --s2: 12px; --s3: 18px; --s4: 24px; --s5: 30px;
--s6: 36px; --s10: 60px; --s16: 96px; --s20: 120px;
/* Ritmo vertical entre secciones: 60–120px, holgado */
--section: clamp(60px, 9vw, 120px);
/* El display del hero vive en una columna de ~640px, no a página completa: a
* 113px se partiría en siete líneas. 76px mantiene el gesto y cabe en tres.
* Los 113px completos se reservan para titulares a todo el ancho. */
--t-hero: clamp(2.5rem, 5.6vw, 4.75rem);
/* Radios */
--r: 24px; /* botones, tarjetas, navegación */
--r-pill: 9999px; /* etiquetas y píldoras */
--page: 1280px;
/* --- Alias del sistema anterior. Mantienen compatibles las páginas que
* todavía no se han reescrito, sin reintroducir superficies. --- */
--bg: var(--void);
--bg-2: var(--void);
--panel: transparent;
--panel-2: transparent;
--line: var(--rule);
--line-2: var(--rule);
--text: var(--bone);
--muted: var(--ash);
--dim: var(--ash);
--radius: var(--r);
--accent-2: var(--accent-dim);
--amber: var(--spark);
--red: #ff6b6b;
}
/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
background: var(--void);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--void);
color: var(--bone);
font-family: var(--sans);
font-size: var(--t-body);
font-weight: var(--w-thin); /* el cuerpo nunca va a 400 */
line-height: var(--lh-body);
font-feature-settings: "ss01" on;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--accent-ink); }
/* Titulares: peso 400 siempre, jerarquía por escala y tracking. */
h1, h2, h3, h4 {
margin: 0 0 0.4em;
font-weight: var(--w-base);
line-height: var(--lh-heading);
letter-spacing: var(--tr-heading);
color: var(--bone);
text-wrap: balance;
}
h1 { font-size: var(--t-h-lg); letter-spacing: var(--tr-display); line-height: var(--lh-display); }
h2 { font-size: var(--t-h); }
h3 { font-size: var(--t-h-2xs); letter-spacing: var(--tr-h-2xs); line-height: 1.25; }
h4 { font-size: var(--t-label); font-weight: var(--w-semi); letter-spacing: var(--tr-label); text-transform: uppercase; }
/* La clase de verdadero display: 113px. Solo una por página. */
.display {
font-size: var(--t-display);
font-weight: var(--w-base);
line-height: var(--lh-display);
letter-spacing: var(--tr-display);
margin: 0;
}
p {
margin: 0 0 1em;
color: var(--mist);
font-weight: var(--w-thin);
max-width: 62ch; /* el texto nunca cruza la página entera */
}
strong { font-weight: var(--w-semi); color: var(--bone); }
em { font-style: italic; }
/* Titular de sección a escala de display (78px): el tamaño lo pone la clase,
* nunca el grosor. */
.h-lg {
font-size: var(--t-h-lg);
font-weight: var(--w-base);
line-height: var(--lh-heading);
letter-spacing: var(--tr-display);
}
.h-sm { font-size: var(--t-h-sm); letter-spacing: var(--tr-heading); }
/* Enlaces: sin contenedor. El sistema no usa cajas para señalar. */
a {
color: var(--bone);
text-decoration: none;
border-bottom: 1px solid var(--rule);
transition: color .18s ease, border-color .18s ease;
}
a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* ------------------------------------------------------------- estructura */
.wrap {
width: 100%;
max-width: var(--page);
margin: 0 auto;
padding: 0 var(--s4);
position: relative;
z-index: 1;
}
.narrow { max-width: 760px; } /* columna de lectura para lo legal */
.section { padding: var(--section) 0; }
.section.tight { padding: var(--s10) 0; }
/* Composición asimétrica de dos columnas: texto + visual, en zigzag. */
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(30px, 6vw, 96px);
align-items: center;
}
.split.text-wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.split.visual-first > .split-text { order: 2; }
.split.visual-first > .split-visual { order: 1; }
@media (max-width: 900px) {
.split, .split.text-wide { grid-template-columns: 1fr; gap: var(--s5); }
.split.visual-first > .split-text,
.split.visual-first > .split-visual { order: 0; }
}
/* Utilidades de composición */
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.between { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.center { text-align: center; }
.center p { margin-left: auto; margin-right: auto; }
.mt { margin-top: var(--s4); }
.mb { margin-bottom: var(--s4); }
.small { font-size: var(--t-label); }
.tiny { font-size: var(--t-caption); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ash); }
.dim { color: var(--ash); }
.bone { color: var(--bone); }
.accent { color: var(--accent); }
.spark { color: var(--spark); }
.nowrap { white-space: nowrap; }
.measure { max-width: 52ch; }
.measure-wide { max-width: 68ch; }
/* Salto de línea explícito, para partir un titular sin usar
. */
.d-block { display: block; }
/* Etiqueta diminuta en mayúsculas, la única puntuación cálida del sistema. */
.eyebrow {
font-family: var(--sans);
font-size: var(--t-label);
font-weight: var(--w-semi);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--spark);
margin: 0 0 var(--s4);
}
.eyebrow.accent { color: var(--accent); }
.eyebrow.ash { color: var(--ash); }
/* Filete de 1px: la concesión estructural. Solo límites reales. */
.rule { height: 1px; background: var(--rule); border: 0; margin: var(--s10) 0; }
/* --------------------------------------------------------------- tarjetas */
/* En este sistema una "tarjeta" no es una superficie: es un bloque de texto.
* Se conserva la clase para no romper nada, pero no dibuja nada. */
.card {
background: none;
border: 0;
border-radius: 0;
padding: 0;
}
/* ---------------------------------------------------------------- botones */
/* Una sola píldora rellena por vista. El resto son enlaces sin contenedor. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
font-family: var(--sans);
font-size: var(--t-label);
font-weight: var(--w-semi);
letter-spacing: var(--tr-label);
text-transform: uppercase;
line-height: 1;
padding: 15px 22px;
border: 1px solid var(--rule);
border-radius: var(--r-pill);
background: transparent;
color: var(--bone);
cursor: pointer;
text-align: center;
transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover { color: var(--accent); border-color: var(--accent); background: transparent; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* Estado activo sin relleno (toggle mes/año): el relleno se reserva a la
* acción principal. */
.btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
/* La acción principal: rellena de acento, con texto oscuro. */
.btn.primary {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-ink);
}
.btn.primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }
/* Enlace fantasma: sin caja, con filete inferior. */
.btn.ghost, .btn.link {
border-color: transparent;
border-bottom: 1px solid var(--rule);
border-radius: 0;
padding: 4px 0;
color: var(--ash);
text-transform: none;
letter-spacing: normal;
}
.btn.ghost:hover, .btn.link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.btn.sm { padding: 10px 15px; font-size: var(--t-caption); }
.btn.danger { color: #ff6b6b; border-color: var(--rule); }
.btn.danger:hover { color: #ff6b6b; border-color: #ff6b6b; }
.btn.block { width: 100%; }
/* --------------------------------------------------------------- insignias */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--t-caption);
font-weight: var(--w-semi);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--ash);
background: none;
border: 1px solid var(--rule);
border-radius: var(--r-pill);
padding: 5px 11px;
white-space: nowrap;
}
.badge.ok { color: var(--accent); border-color: rgba(254, 200, 6, .38); }
.badge.info { color: var(--bone); border-color: rgba(255, 255, 255, .28); }
.badge.warn { color: var(--accent-dim); border-color: rgba(201, 154, 0, .45); }
.badge.bad { color: #ff6b6b; border-color: rgba(255, 107, 107, .38); }
/* ----------------------------------------------------------------- avisos */
/* Sin caja: una barra de acento a la izquierda y texto. */
.notice {
border-left: 2px solid var(--spark);
padding: var(--s1) 0 var(--s1) var(--s4);
font-size: var(--t-label);
color: var(--mist);
margin: 0;
}
.notice strong { color: var(--bone); }
.notice.ok { border-left-color: var(--accent); }
.notice.bad { border-left-color: #ff6b6b; }
.notice.info { border-left-color: rgba(255, 255, 255, .45); }
/* ------------------------------------------------------------------ forms */
/* Concesión: un campo necesita un límite visible para existir. Se resuelve
* con un solo filete inferior, sin caja. */
label {
display: block;
font-size: var(--t-caption);
font-weight: var(--w-semi);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--ash);
margin-bottom: var(--s2);
}
input[type=text], textarea, select {
width: 100%;
font-family: var(--sans);
font-size: var(--t-body);
font-weight: var(--w-thin);
color: var(--bone);
background: transparent;
border: 0;
border-bottom: 1px solid var(--rule);
border-radius: 0;
padding: var(--s2) 0;
transition: border-color .18s ease;
}
input[type=text]::placeholder, textarea::placeholder { color: #5a5a5a; }
input[type=text]:focus, textarea:focus, select:focus {
outline: none;
border-bottom-color: var(--accent);
}
textarea { resize: vertical; min-height: 84px; line-height: var(--lh-body); }
select { cursor: pointer; }
select option { background: var(--void); color: var(--bone); }
.field { margin-bottom: var(--s5); }
.hint { font-size: var(--t-caption); color: var(--ash); margin-top: var(--s2); }
/* --------------------------------------------------------------- cabecera */
/* Barra transparente sobre el vacío: sin fondo, sin borde, sin desenfoque.
* Va anclada arriba del documento (no fija) para no tapar el texto al bajar. */
header.top {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 40;
background: none;
border: 0;
}
.top-inner {
display: flex;
align-items: center;
gap: var(--s4);
padding-top: var(--s5);
padding-bottom: var(--s5);
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--s2);
font-size: var(--t-label);
font-weight: var(--w-semi);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--bone);
border-bottom: 0;
}
.brand:hover { color: var(--bone); border-bottom: 0; }
/* El símbolo real de 3ZIK, incrustado como SVG en línea y pintado con
* currentColor: hereda el acento del sistema. El tamaño lo traen sus propios
* atributos width/height, así que la misma clase sirve para la cabecera (16×24)
* y para el símbolo grande del estado vacío (44×66).
* Para verlo en blanco en vez de verde: color: var(--bone). */
.brand-mark {
display: block;
flex: none;
color: var(--accent);
}
nav.main {
display: flex;
align-items: center;
gap: var(--s4);
margin-left: auto;
flex-wrap: wrap;
}
nav.main a {
font-size: var(--t-label);
font-weight: var(--w-semi);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--ash);
border-bottom: 0;
}
nav.main a:hover { color: var(--bone); }
nav.main a.on { color: var(--bone); }
/* El último enlace del menú es la píldora de acción. */
nav.main a.cta {
background: var(--accent);
color: var(--accent-ink);
border-radius: var(--r-pill);
padding: 10px 16px;
}
nav.main a.cta:hover { background: var(--accent-soft); color: var(--accent-ink); }
@media (max-width: 700px) {
.top-inner { flex-wrap: wrap; gap: var(--s2) var(--s3); padding-top: var(--s4); }
nav.main { gap: var(--s3); margin-left: 0; width: 100%; }
nav.main a { font-size: var(--t-caption); }
nav.main a.cta { padding: 8px 13px; }
}
/* ------------------------------------------------------------------- hero */
.hero { padding-top: clamp(150px, 20vw, 230px); padding-bottom: var(--section); }
.hero .display { font-size: var(--t-hero); margin-bottom: var(--s5); }
.hero .lede { font-size: var(--t-body); color: var(--mist); max-width: 42ch; margin-bottom: var(--s6); }
/* Lienzo de la constelación: solo, sin marco. */
.constellation { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.constellation canvas { display: block; width: 100%; height: 100%; }
/* Capa de partículas ambientales, detrás de todo el contenido.
* OJO: un