/* ===========================================================================
Arandu AI — capa de marketing del sistema de diseño (solo sitio comercial)
---------------------------------------------------------------------------
ADR-0053: `tokens.css` es espejo EXACTO de `console/src/styles/index.css`
(fuente de verdad, cero deriva verificada). Este archivo NO lo toca: agrega
encima la capa que un sitio de marketing necesita y una consola no.
Cargar SIEMPRE después de tokens.css:
Por qué existe: el sistema base es excelente PARA UNA CONSOLA. Su escala
tipográfica topa en 36px y su ritmo de espaciado en 64px. El sitio necesitaba
más y lo resolvió esquivando el sistema (`.hero-title` hardcodea
`clamp(2rem,5vw,3.5rem)`; `site.css` hardcodea `80rem` sin token). Esta capa
legitima esas necesidades como tokens en vez de números mágicos.
=========================================================================== */
/* ===========================================================================
0) FUENTE DE MARCA — self-hosteada. Inter v4 (SIL OFL 1.1, ver
assets/fonts/Inter-LICENSE.txt).
Arregla el bug real: tokens.css declara "Arandu Sans" con
`src: local("Inter Variable"), local("Inter")` y NINGÚN url(). Sin archivo
que descargar, Inter solo aparecía si el visitante ya la tenía instalada.
Casi nadie la tiene, así que el sitio caía a system-ui (Segoe UI en Windows,
SF Pro en Mac): la tipografía de marca no existía para el público.
Estas reglas se declaran DESPUÉS de tokens.css, así que ganan el cascade
para los rangos que cubren, sin tocar el espejo del producto (ADR-0053).
Sin local(): no se puede controlar qué versión de Inter tiene instalada el
visitante (puede ser vieja o estar rota). Google Fonts lo quitó de su CSS
por esta misma razón. Preferimos el archivo que servimos nosotros.
Subsets por unicode-range: el navegador descarga SOLO lo que la página usa.
Un visitante en español baja 47KB (latin) y nunca toca latin-ext.
El variable completo son 343KB porque trae griego y cirílico que no usamos.
=========================================================================== */
@font-face {
font-family: "Arandu Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/fonts/inter-latin.woff2") format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Arandu Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Mono — mismo bug, misma cura. JetBrains Mono v2 (SIL OFL 1.1, ver
assets/fonts/JetBrainsMono-LICENSE.txt). Importa más de lo que parece:
de los 80 del sitio, 59 están en /descargas/ — los comandos de
instalación que el comprador técnico lee para decidir si somos serios.
No se precarga: solo lo bajan las páginas que realmente muestran código. */
@font-face {
font-family: "Arandu Mono";
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
:root {
/* -----------------------------------------------------------------------
1) BREAKPOINTS — mobile-first, extendidos. NO se redefinen sm/md/lg:
la consola los espeja en layout.css/ui.css y los consume desde JS
(use-media-query). Romperlos rompería el producto.
Piso de diseño: 320px. No lleva token — es el default mobile-first.
Banda crítica real (2026): 360–430px CSS. 360x800 + 390x844 + 393x852
concentran ~60% del tráfico móvil mundial; 320px sigue vivo en gama baja.
En rem a propósito: respeta el zoom del usuario (WCAG 1.4.10 Reflow).
Un breakpoint en px ignora que el usuario agrandó la tipografía.
----------------------------------------------------------------------- */
/* Heredados de tokens.css — referencia, no se redefinen:
--arandu-bp-sm: 30rem; 480px
--arandu-bp-md: 48rem; 768px
--arandu-bp-lg: 64rem; 1024px */
--arandu-bp-xl: 80rem; /* 1280px — desktop. Legitima el 80rem hardcodeado en site.css */
--arandu-bp-2xl: 96rem; /* 1536px — pantalla ancha: se topa el contenido, no se estira */
/* -----------------------------------------------------------------------
2) TIPOGRAFÍA DISPLAY — fluida, para heros y títulos de sección.
El sistema base llega a 2.25rem (36px): tamaño de consola.
Interpolación entre 320px y 1280px de viewport. Fuera de ese rango
clamp() fija los extremos, así que nunca explota ni colapsa.
Reemplaza el `clamp(2rem, 5vw, 3.5rem)` mágico de .hero-title.
----------------------------------------------------------------------- */
--arandu-font-size-display-sm: clamp(
1.75rem,
1.5rem + 1.25vw,
2.5rem
); /* 28 → 40px */
--arandu-font-size-display-md: clamp(
2rem,
1.667rem + 1.667vw,
3rem
); /* 32 → 48px */
--arandu-font-size-display-lg: clamp(
2.25rem,
1.75rem + 2.5vw,
3.75rem
); /* 36 → 60px */
--arandu-font-size-display-xl: clamp(
2.5rem,
1.833rem + 3.333vw,
4.5rem
); /* 40 → 72px */
--arandu-font-size-display-2xl: clamp(
2.75rem,
2rem + 3.75vw,
5rem
); /* 44 → 80px */
/* Cuerpo fluido para copy de marketing (más grande que el de app) */
--arandu-font-size-lead: clamp(
1.0625rem,
1rem + 0.31vw,
1.25rem
); /* 17 → 20px */
/* Tracking display: cuanto más grande el tipo, más apretado. Regla óptica —
sin esto los titulares grandes se ven flojos y amateurs. */
--arandu-tracking-display: -0.03em;
--arandu-line-height-display-tight: 1.05;
/* -----------------------------------------------------------------------
3) RITMO DE SECCIÓN — el base topa en space-16 (64px): denso de app.
Una marca respira a 96–128px.
----------------------------------------------------------------------- */
--arandu-space-20: 5rem; /* 80px */
--arandu-space-24: 6rem; /* 96px */
--arandu-space-32: 8rem; /* 128px */
/* Padding vertical de sección, fluido: 64px en móvil → 128px en desktop.
Evita tener que escribir media queries solo para respirar. */
--arandu-section-py: clamp(4rem, 2.667rem + 6.667vw, 8rem);
--arandu-section-py-sm: clamp(2.5rem, 1.833rem + 3.333vw, 4.5rem);
/* Padding horizontal del contenedor, fluido: 16px móvil → 48px desktop.
Reemplaza las DOS únicas media queries que tenía el sitio. */
--arandu-container-px: clamp(1rem, 0.333rem + 3.333vw, 3rem);
/* -----------------------------------------------------------------------
4) MEDIDA DE LECTURA — ancho máximo por tipo de contenido.
La legibilidad vive entre 45 y 75 caracteres por línea. Un párrafo a
1280px de ancho no se lee: se escanea y se abandona.
----------------------------------------------------------------------- */
--arandu-measure-prose: 68ch; /* párrafos largos */
--arandu-measure-lead: 60ch; /* subtítulo de hero */
--arandu-measure-display: 20ch; /* titulares — fuerza quiebre temprano */
/* -----------------------------------------------------------------------
5) SUPERFICIES PREMIUM — el sistema ya tiene glow y highlight-top (buenos).
Falta el degradado sutil que separa un dark premium de un dark plano.
Ámbar/oro NUNCA es acción: acá es solo luz.
----------------------------------------------------------------------- */
--arandu-surface-gradient: linear-gradient(
180deg,
var(--arandu-ink-900) 0%,
var(--arandu-ink-950) 100%
);
--arandu-hero-glow: radial-gradient(
60% 50% at 50% 0%,
rgb(255 90 31 / 0.13) 0%,
transparent 70%
);
--arandu-hairline: 1px solid rgb(247 243 236 / 0.07);
}
/* ===========================================================================
PRIMITIVAS RESPONSIVE — 2026
=========================================================================== */
/* Container queries: los componentes se adaptan al espacio REAL que tienen,
no al ancho del navegador. Una feature-card en una barra angosta de un
monitor ancho se ve igual de bien que sola. Soporte >95% en 2026.
Se declaran acá; los componentes consultan con @container. */
.cq {
container-type: inline-size;
}
.cq-cards {
container: cards / inline-size;
}
.cq-panel {
container: panel / inline-size;
}
/* Titulares: evita la línea huérfana de una palabra. Baseline 2026. */
.u-balance {
text-wrap: balance;
}
/* Párrafos: evita la viuda al final. */
.u-pretty {
text-wrap: pretty;
}
/* Medidas de lectura como utilidades */
.u-measure {
max-width: var(--arandu-measure-prose);
}
.u-measure-lead {
max-width: var(--arandu-measure-lead);
}
.u-measure-display {
max-width: var(--arandu-measure-display);
}
/* Notch / barra de gestos: sin esto el contenido queda debajo del recorte
en iPhone y Android modernos en horizontal. */
.u-safe-x {
padding-left: max(var(--arandu-container-px), env(safe-area-inset-left));
padding-right: max(var(--arandu-container-px), env(safe-area-inset-right));
}
/* Alturas de viewport estables en móvil: 100vh salta cuando la barra del
navegador se oculta. dvh es la unidad correcta; vh queda de fallback. */
.u-minh-screen {
min-height: 100vh;
min-height: 100dvh;
}
/* Imágenes fluidas por defecto — regla de higiene que faltaba. */
img,
svg,
video {
max-width: 100%;
height: auto;
}