/* ============================================================================
Interagentic — sistema del sitio (una sola hoja, sin frameworks, sin build)
Decisiones y por qué (guía `design-taste-frontend`, §4 y §5):
· UN SOLO ACENTO, familia "Cobalt + Cream": el azul de la marca sobre neutros
CALIBRADOS. Antes el blanco (#f9f9ff) y el negro (#121318) eran azulados, y
un sitio azul sobre gris azulado se lee como panel de administración. El
azul sigue siendo dominante, pero el neutro ya no compite con él.
· Azul "de campo" y azul "de texto" son TOKENS DISTINTOS: en modo oscuro el
#005ab4 no da contraste para texto, así que los campos grandes y el texto
de enlace tienen su propio valor. Es la diferencia entre un color de marca
y un color legible.
· UNA escala de radios con regla escrita (§4.4): interactivos = pill,
paneles = 16, campos = 12, etiquetas = 8. Se acabó el 16/12/pill mezclado
sin criterio.
· MOVIMIENTO: solo `transform` y `opacity` (§6.A). Nada de `top`/`width`.
Nada de escuchar `scroll` (§5.D): los reveals van con IntersectionObserver
y el estado de la barra con un centinela.
· Todo el movimiento está tras `prefers-reduced-motion` (§6.B, obligatorio).
· MODO OSCURO: sigue al sistema por defecto, pero el visitante puede forzarlo con el
interruptor de la barra, y su elección se recuerda. El tema se resuelve en CSS a
partir de `data-tema` en la raíz, y ese atributo lo escribe un script en línea del
: decidirlo con JavaScript diferido hace que la página entre con un tema y
salte al otro (un destello por carga).
========================================================================= */
/* ============================================================================
FUENTES — alojadas aquí, no en Google
Las dos familias vivían en un al CDN de Google. Eso tenía dos costos: cada visita
mandaba la IP del visitante a Google, y el texto no se podía pintar hasta resolver dos
DNS y completar dos handshakes TLS contra un tercero. Ahora son dos archivos de este
sitio: cero peticiones externas.
Son las versiones VARIABLES y el subconjunto `latin`, que cubre el español completo
(á-ú, ñ, ¿, ¡). Un archivo por familia sirve todo el rango de pesos, así que no hay una
descarga por peso. El `unicode-range` es el mismo que declara Google: dice qué caracteres
cubre el archivo, y lo que quede fuera —la flecha → de los enlaces, por ejemplo— usa la
fuente del sistema, exactamente igual que antes.
Los archivos y sus licencias están en `fuentes/`, con un LEEME que explica su origen.
========================================================================= */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(../fuentes/geist-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: 'Geist Mono';
font-style: normal;
font-weight: 400 500;
font-display: swap;
src: url(../fuentes/geist-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;
}
/* ---------------------------------------------------------------- tokens ---- */
:root {
/* El lienzo y los controles nativos (barra de desplazamiento, desplegables de
) siguen el tema claro por defecto. Los bloques oscuros de abajo lo cambian.
`color-scheme` NO es decorativo: es lo que hace que el navegador pinte el fondo antes
de tener contenido y en el color correcto, en vez del que le dicte el sistema. */
color-scheme: light;
/* Roles del acento */
--acento: #005ab4; /* texto, iconos, enlaces, bordes de foco */
--acento-texto: #00417f; /* acento sobre fondos claros, con más contraste */
--acento-campo: #005ab4; /* campos grandes rellenos (con texto blanco) */
--acento-suave: #e8effa; /* capa tonal para hover sobre claro */
/* Neutros calibrados (ni azulados ni beige cálido) */
--base: #fafaf8;
--base-2: #f3f3f0;
--base-3: #e9e9e5;
--tinta: #15171a;
--tinta-2: #4a5058;
--tinta-3: #6d737b;
--linea: #dededa;
--linea-2: #c8c8c2;
--blanco: #ffffff;
/* Tipografía */
--sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* Radios — REGLA: interactivos pill · paneles 16 · campos 12 · etiquetas 8 */
--r-boton: 999px;
--r-panel: 16px;
--r-campo: 12px;
--r-etiqueta: 8px;
/* Ritmo */
--ancho: 1200px;
--gutter: 24px;
--seccion: 104px;
--alto-barra: 68px;
/* Movimiento (un solo lugar para afinarlo) */
--curva: cubic-bezier(.16, 1, .3, 1);
--rapido: 150ms;
--medio: 320ms;
--lento: 620ms;
}
/* ------------------------------------------------------------- modo oscuro ----
Los VALORES oscuros viven una sola vez (--o-*). El MAPEO se escribe dos veces porque
son dos condiciones distintas: la preferencia del sistema y la elección del visitante.
Repetir los `var()` es el precio de que ambas convivan sin repetir los colores. */
:root {
--o-acento: #8fb8ff; /* el azul de marca, aclarado para LEER sobre oscuro */
--o-acento-texto: #a8c8ff;
--o-acento-campo: #0b5cb4; /* el campo relleno conserva el azul saturado */
--o-acento-suave: #16243a;
--o-base: #101215;
--o-base-2: #171a1e;
--o-base-3: #1f2328;
--o-tinta: #f1f1ef;
--o-tinta-2: #b8bcc2;
--o-tinta-3: #8b9098;
--o-linea: #2a2e34;
--o-linea-2: #3a3f46;
--o-blanco: #0b0d10;
}
/* 1) El visitante eligió: su elección gana sobre el sistema, en los dos sentidos. */
html[data-tema="claro"] { color-scheme: light; }
html[data-tema="oscuro"] {
color-scheme: dark;
--acento: var(--o-acento);
--acento-texto: var(--o-acento-texto);
--acento-campo: var(--o-acento-campo);
--acento-suave: var(--o-acento-suave);
--base: var(--o-base);
--base-2: var(--o-base-2);
--base-3: var(--o-base-3);
--tinta: var(--o-tinta);
--tinta-2: var(--o-tinta-2);
--tinta-3: var(--o-tinta-3);
--linea: var(--o-linea);
--linea-2: var(--o-linea-2);
--blanco: var(--o-blanco);
}
/* 2) Nadie eligió nada: manda el sistema. El `:not([data-tema="claro"])` es justo lo que
permite que quien pidió claro lo conserve aunque su sistema esté en oscuro. */
@media (prefers-color-scheme: dark) {
html:not([data-tema="claro"]) {
color-scheme: dark;
--acento: var(--o-acento);
--acento-texto: var(--o-acento-texto);
--acento-campo: var(--o-acento-campo);
--acento-suave: var(--o-acento-suave);
--base: var(--o-base);
--base-2: var(--o-base-2);
--base-3: var(--o-base-3);
--tinta: var(--o-tinta);
--tinta-2: var(--o-tinta-2);
--tinta-3: var(--o-tinta-3);
--linea: var(--o-linea);
--linea-2: var(--o-linea-2);
--blanco: var(--o-blanco);
}
}
/* ------------------------------------------------------------------ base ---- */
*, *::before, *::after { box-sizing: border-box; }
/* El fondo se pinta en `html`, no solo en `body`: así el lienzo completo —incluido el
rebote del scroll en iOS— sale del mismo token y no de un blanco del navegador. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--base); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--base);
color: var(--tinta);
font-family: var(--sans);
font-size: 17px;
line-height: 1.6;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* Foco visible SIEMPRE (AA): 2px de acento con separación del fondo */
:focus-visible {
outline: 2px solid var(--acento);
outline-offset: 3px;
border-radius: 4px;
}
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.estrecho { max-width: 760px; }
/* Enlace de salto: invisible hasta que se tabula hacia él */
.saltar {
position: absolute; left: 16px; top: -60px; z-index: 100;
background: var(--acento-campo); color: #fff; padding: 10px 16px;
border-radius: var(--r-etiqueta); text-decoration: none;
transition: transform var(--rapido) var(--curva);
}
.saltar:focus { transform: translateY(72px); }
/* Centinela de 1px: su salida del viewport pone el borde a la barra */
.centinela { height: 1px; }
/* ------------------------------------------------------- barra superior ---- */
.barra {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--base) 88%, transparent);
backdrop-filter: blur(12px);
border-bottom: 1px solid transparent;
transition: border-color var(--medio) var(--curva), background-color var(--medio) var(--curva);
}
.barra[data-pegada] { border-bottom-color: var(--linea); background: color-mix(in srgb, var(--base) 94%, transparent); }
.barra__fila {
height: var(--alto-barra);
display: flex; align-items: center; gap: 24px;
}
.marca { display: inline-flex; align-items: center; color: var(--tinta); }
/* El logo de la portada va incrustado (4 KB de trazado dentro del HTML). En las demás
páginas se usa `sitio/marca/interagentic.svg`: una sola copia de la marca para todo el
sitio, cacheada entre navegaciones y pintada con `background: currentColor` a través de
la máscara, así que hereda el color del tema sin necesidad de un archivo por tema.
`mask` usa el ALFA del SVG: el color del archivo da igual.
PENDIENTE: unificar la portada a esta forma (una línea de HTML). */
span.marca__logo {
display: block; aspect-ratio: 856 / 259;
background-color: currentColor;
-webkit-mask: url(../marca/interagentic.svg) no-repeat left center / contain;
mask: url(../marca/interagentic.svg) no-repeat left center / contain;
}
/* Tamaño del logo, con la cuenta a la vista: en el lockup el wordmark ocupa solo el 44 % de
la altura del lienzo (medido: 115 de 259), así que a 25 px las letras salían a 11 px de
caja y a unos 6 px de altura real — la mitad que el texto del menú, que es 15 px. Por eso
se veía pequeño aunque el hueco estuviera lleno: el problema no era el tamaño de la caja,
era la proporción del lockup. A 38 px el wordmark mide 16.9 px y sus mayúsculas 9.2 px,
comparable al menú. */
.marca__logo { height: 28px; width: auto; }
.barra .marca__logo { height: 38px; } /* en la barra, donde compite con el menú */
.nav { display: flex; gap: 28px; margin-inline-start: 20px; }
.nav a {
color: var(--tinta-2); text-decoration: none; font-size: 15px; font-weight: 500;
padding-block: 4px; position: relative;
transition: color var(--rapido) var(--curva);
}
.nav a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: var(--acento); transform: scaleX(0); transform-origin: left;
transition: transform var(--medio) var(--curva);
}
.nav a:hover { color: var(--tinta); }
.nav a:hover::after { transform: scaleX(1); }
.barra__acciones { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
/* -------------------------------------------------------------- botones ---- */
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
padding: 12px 22px; border-radius: var(--r-boton); border: 1px solid transparent;
font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
text-decoration: none; white-space: nowrap; cursor: pointer;
transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva),
border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva),
box-shadow var(--rapido) var(--curva);
}
.boton:active { transform: scale(.98); } /* respuesta táctil (§4.5) */
.icono { width: 18px; height: 18px; fill: currentColor; }
.boton--primario { background: var(--acento-campo); color: #fff; }
.boton--primario:hover { background: color-mix(in srgb, var(--acento-campo) 86%, #000); }
.boton--contorno { background: transparent; color: var(--tinta); border-color: var(--linea-2); }
.boton--contorno:hover { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-texto); }
.boton--claro { background: #fff; color: #0b3f7d; }
.boton--claro:hover { background: color-mix(in srgb, #fff 88%, var(--acento)); }
/* Hamburguesa: solo existe por debajo de 1024px */
.hamburguesa {
display: none; width: 42px; height: 42px; padding: 0;
background: transparent; border: 1px solid var(--linea-2); border-radius: var(--r-boton);
cursor: pointer; position: relative;
}
.hamburguesa span {
position: absolute; left: 11px; right: 11px; height: 2px; background: var(--tinta);
border-radius: 2px; transition: transform var(--medio) var(--curva), opacity var(--rapido) var(--curva);
}
.hamburguesa span:nth-child(1) { transform: translateY(-4px); }
.hamburguesa span:nth-child(2) { transform: translateY(4px); }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }
/* -------------------------------------------------- interruptor de tema ---- */
/* Mismo lenguaje que la hamburguesa: pill de 42px con borde. Al ser un