/** * tokens.css — Sistema de diseño de Coodex. * * Valores tomados del diseño de referencia (medidos sobre la demo, no copiados * de su hoja de estilos). Todo el tema consume estas variables: ningún otro * fichero declara colores, tamaños ni espaciados propios. * * ESCALA POR ESCALONES, no fluida (revisión 2026-08-24). El diseño de * referencia NO interpola: salta en 1199 / 991 / 767. Los `clamp()` que había * antes saturaban demasiado pronto (el H1 llegaba a 140px ya sobre los 1000px * de ventana y el ritmo de sección a 130px sobre los 930), así que entre 992 y * 1399 todo salía notablemente más grande y más separado que el original. * Medido sobre la demo a 1600 / 1024 / 375 px. */ :root { /* ---------- Color ---------- */ --cdx-negro: #0f0f0f; /* texto, botones, secciones oscuras */ --cdx-negro-puro: #000; /* titulares */ --cdx-blanco: #fff; --cdx-gris-fondo: #f5f5f5; /* fondo de sección clara */ --cdx-gris-suave: #f0f0f0; --cdx-gris-texto: #69727d; /* texto secundario */ --cdx-gris-borde: #c5c5c5; /* líneas de rejilla (logos, contadores) */ --cdx-negro-60: rgba(15, 15, 15, .6); --cdx-blanco-60: rgba(255, 255, 255, .6); --cdx-blanco-15: rgba(255, 255, 255, .15); /* Alias semánticos */ --cdx-color-texto: var(--cdx-negro); --cdx-color-fondo: var(--cdx-blanco); --cdx-color-primario: var(--cdx-negro); /* ---------- Tipografía ---------- */ --cdx-fuente: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --cdx-fs-body: 20px; --cdx-lh-body: 1.6; /* 20/32 */ --cdx-fs-small: 18px; --cdx-fs-nav: 16px; /* Línea legal del pie: letra pequeña de cierre, por debajo de `fs-small`. 16 en escritorio y 13 en móvil (ver el escalón de ≤767). */ --cdx-fs-legal: 16px; /* Titulares. Escalones del diseño (los pequeños van en los @media de abajo): H1 (hero) 140 → 88 → 70 → 65 H2 (sección) 80 → 70 → 60 → 40 ← es el "h3" de la referencia H3 (tarjeta) 28 → 26 → 24 → 22 ← es su "h5" marquesina 140 → 95 → 75 → 65 */ --cdx-fs-h1: 140px; --cdx-fs-h2: 80px; --cdx-fs-h3: 28px; --cdx-fs-h4: 24px; --cdx-fs-display: 140px; --cdx-lh-titulo: 1.07; /* 140 → 149.8 */ --cdx-lh-titulo-2: 1.125; /* 80 → 90 */ --cdx-lh-tarjeta: 1.35; /* 28 → 37.8 */ /* ⚠️ **PROPORCIONAL, no absoluto** (cambiado el 2026-09-03). Era `-4.2px` fijos, copiados del diseño de referencia, que los usa absolutos. Y a 140px eso es exactamente **-0.03em**… pero el token no se encoge con el cuerpo, así que en móvil, con el h1 a 60px, esos mismos -4.2px son **-0.07em: más del DOBLE de apretado que en escritorio**. Por eso los titulares de móvil se veían comprimidos. Ahora va en `em` con la razón de escritorio, así que **todos los escalones tienen el mismo interletraje relativo**: -4.2px a 140, -2.64 a 88, -2.1 a 70, -1.8 a 60 y -1.62 a 54. El usuario asume los saltos de línea que eso provoque. */ --cdx-ls-h1: -.03em; --cdx-ls-h2: -2px; --cdx-ls-tarjeta: -.28px; --cdx-peso-normal: 400; --cdx-peso-fuerte: 600; /* ---------- Retícula ---------- */ --cdx-ancho-max: 1604px; /* boxed del diseño */ /* Gutter del diseño: 12px a TODOS los tamaños (antes se abría a 20px en escritorio, lo que estrechaba el contenido 12px respecto al original). */ --cdx-margen-lateral: 12px; --cdx-gap: clamp(1.25rem, .8rem + 1.9vw, 2.5rem); /* ---------- Espaciado vertical ---------- Ritmo de sección del diseño: 130 → 80 (≤1199) → 65 (≤991). */ --cdx-sec-top: 130px; --cdx-sec-bottom: 130px; /* Hueco entre el titular de un bloque y su contenido: 60 → 45 (≤767). */ --cdx-espacio-bloque: 60px; /* Alto de la cabecera, que es PEGAJOSA y no se esconde al bajar (§65.1). Lo necesita cualquier cosa que se ancle con `position: sticky`, para anclarse DEBAJO y no quedarse detrás de ella. Tiene que coincidir con el `min-height` de `.cdx-cabecera__inner`, que es quien lo manda de verdad. */ --cdx-cabecera-alto: 90px; /* ---------- Botones ---------- */ --cdx-btn-radio: 40px; --cdx-btn-padding: 14px 20px 14px 24px; --cdx-btn-fs: 18px; /* ---------- Movimiento ---------- */ --cdx-transicion: .4s cubic-bezier(.22, .61, .36, 1); --cdx-transicion-lenta: .8s cubic-bezier(.22, .61, .36, 1); /* ---------- Animación de entrada ---------- Valores LITERALES del diseño, leídos de su `quanto-addon.js` (no deducidos de mirar la página). Allí las mueve GSAP; aquí son transiciones CSS, así que sus `ease` de GSAP van traducidos a bézier: power2.out = easeOutCubic = cubic-bezier(.215, .61, .355, 1) power1.out = easeOutQuad = cubic-bezier(.25, .46, .45, .94) `fade-anim` → opacidad 0 + 50px de desplazamiento en `data-direction` (bottom por defecto), 1.15s, retardo .15s, power2.out, disparo "top 85%". `img_reveal` → marco desde xPercent -100 (1s) + imagen desde xPercent +100 y escala 1.5 (1.5s) a la vez, power2.out, disparo "top 70%". `odometer` → rodillo del contador: cinta vertical por dígito, `translateY(-100%)` en 2s. Su `move-anim` (cada línea cayendo en perspectiva desde rotateX(-80deg)) está medido y documentado en §5.8 del handoff, pero NO se usa: se probó en el hero y el usuario descartó el balanceo. */ --cdx-anim-offset: 50px; --cdx-anim-dur: 1.15s; --cdx-anim-delay: .15s; --cdx-anim-ease: cubic-bezier(.215, .61, .355, 1); /* Recorrido de las partes de la ilustración del CTA de la portada, que entran cada una desde su lado (ver «Ilustración del CTA final, ANIMADA» en bloques.css). Va aparte de `--cdx-anim-offset` porque NO son píxeles de pantalla: dentro de un SVG, `translateX` va en UNIDADES DEL viewBox, y los 50 de arriba serían 55px a 1600 —un 10 % del ancho de la ilustración— con las piezas cruzándose unas con otras. 22 unidades son 24,3px a 1600 y 13,8px a 375: al ir en unidades del viewBox, el recorrido escala con el dibujo y se ve proporcionalmente igual en cualquier ancho. */ --cdx-ilus-offset: 22px; /* Rodillo del contador: 2s y la curva por defecto de una `transition` (`ease`), que es lo que deja su odometer.css al no especificar ninguna. */ --cdx-odo-dur: 2s; --cdx-odo-ease: cubic-bezier(.25, .1, .25, 1); /* Barrido `img_reveal`. Los tres valores salen de recorrer SU timeline real (la de su ScrollTrigger, no una reconstrucción) y medir la imagen (§57): · **1s**, que es lo que dura el tramo visible (su tween A). · **`1` de escala, o sea SIN ZOOM. Es una desviación pedida.** Quanto sí lleva un resto de zoom durante el barrido —su tween B pasa por 1,148 al arrancar el tramo visible y baja a 1—, pero el usuario lo rechazó tres veces: quiere **solo el desplazamiento lateral**, sin el ajuste final. Con 1 la transición de `scale` queda en un no-op inofensivo. 💡 Para recuperar el de Quanto: **1.148148** (= 1 + 4/27). Y NO 1,5, que es el valor de medio segundo antes, cuando la foto todavía cruza el marco: estirarlo sobre el barrido mete 3,4 veces el zoom real. · la curva es `Power2.out`, un cúbico de salida, con Bézier EXACTO: `cubic-bezier(1/3, 1, 2/3, 1)` (0,0000 % de desvío contra `1-(1-t)³`; el `--cdx-anim-ease` general se desvía un 2,22 %). ⚠ Desplazamiento y escala comparten duración y curva **a propósito**: en su timeline los dos tramos van en paralelo durante ese segundo. */ --cdx-rev-dur: 1s; --cdx-rev-escala: 1; --cdx-rev-ease: cubic-bezier(.333333, 1, .666667, 1); } /* ---------- Escalones del diseño ---------- Los mismos cortes que la referencia. Al vivir en el `:root`, todo el tema hereda el valor correcto sin tocar ni una regla de los bloques. */ /* PORTÁTILES (1200-1599, p. ej. un Mac de 13", 1280-1470 de ancho útil): el boxed de 1604 no llega a actuar y el contenido quedaba a 12 px del borde («todo pegado a los márgenes»). Solo en esta franja el margen lateral sube a 48 (pedido del usuario, 2026-10-22, §130). Desde 1600 y por debajo de 1200, los valores medidos de siempre. */ @media (min-width: 1200px) and (max-width: 1599px) { :root { --cdx-margen-lateral: 48px; } } @media (max-width: 1199px) { :root { --cdx-fs-h1: 88px; --cdx-fs-h2: 70px; --cdx-fs-h3: 26px; --cdx-fs-h4: 22px; --cdx-fs-display: 95px; --cdx-sec-top: 80px; --cdx-sec-bottom: 80px; } } @media (max-width: 991px) { :root { --cdx-fs-h1: 70px; --cdx-fs-h2: 60px; --cdx-fs-h3: 24px; --cdx-fs-h4: 20px; --cdx-fs-display: 75px; --cdx-sec-top: 65px; --cdx-sec-bottom: 65px; } } @media (max-width: 767px) { :root { /* 65 → 60: DESVIACIÓN a propósito del escalón del diseño. Medido con la Instrument Sans real a 600 y con el interletraje de -4.2px, «La tecnología» ocupa 358.6px a 65px y solo hay 351 disponibles a 375 de ventana (375 − 24 de gutter), así que partía en dos líneas. A 60px mide 326.8 y entra también a 360 de ventana (336 disponibles). */ --cdx-fs-h1: 60px; --cdx-fs-h2: 40px; --cdx-fs-h3: 22px; --cdx-fs-display: 65px; --cdx-espacio-bloque: 45px; --cdx-fs-legal: 13px; } } /* Móviles estrechos (320-374). A 60px «La tecnología» mide 326.8 y a 320 de ventana solo hay 296: hace falta bajar a 54 (288.7). Mismo criterio medido. */ @media (max-width: 374px) { :root { --cdx-fs-h1: 54px; } }