/* ==========================================================================
Kelbia — hoja de estilos unica de la web.
Grafito de fondo, azul electrico para lo que se pulsa, ambar solo para la
accion principal. Esquinas de 6 px, bordes de 1 px, cero sombras.
Orden del archivo:
1. Variables 10. Listas y pasos
2. Reajuste base 11. Precios
3. Tipografia 12. Preguntas frecuentes
4. Enlaces y foco 13. Conversacion de ejemplo
5. Botones 14. Formulario
6. Contenedores 15. Utilidades
6b. Marca
7. Cabecera 16. Adaptable
8. Pie 17. Movimiento reducido
9. Rejillas y tarjetas 18. Impresion
========================================================================== */
/* 1. Variables ============================================================ */
:root {
/* --- Los siete colores base de la identidad. No se tocan. -------------- */
--fondo: #0D1117; /* Fondo */
--superficie: #161B22; /* Tarjetas */
--texto: #E9EDF2; /* Texto primario */
--texto-tenue: #98A3B3; /* Texto secundario */
--marca: #4D7CFF; /* Marca */
--accion: #FFB020; /* Accion / CTA */
--banda: #F4F6FA; /* Banda clara */
/* --- Derivadas en modo oscuro -----------------------------------------
Todas salen de desplazar la luminosidad de los siete de arriba. La regla
de la identidad es que aqui no entra ningun tono nuevo: si hace falta un
color que no este en esta lista, es que algo se esta diseñando mal. */
--marca-hover: #6B92FF;
/* Ojo: el pulsado solo vale como FONDO (con blanco encima da 5.05:1). Como
color de texto sobre el grafito se queda en 3.75:1 y no llega a AA. */
--marca-pulsado: #3A66E0;
--marca-fondo: #17203A; /* fondo de estado en azul */
--accion-hover: #FFC24D;
--accion-pulsado: #E0930A;
--accion-fondo: #2A2013; /* fondo de estado en ambar */
--superficie-hover: #1C222B;
--borde: #232A35;
/* Grafito. Es el color del texto que va encima del ambar: #0D1117 sobre
#FFB020 da 10.4:1. Nunca se pone texto ambar sobre claro. */
--tinta: #0D1117;
/* Azul oscuro. Sobre la banda clara el azul de marca se queda en 3.4:1 y
solo vale para iconos y titulares; para texto y enlaces se usa este, que
llega a 5.4:1. Tambien es el fondo del boton azul, donde el blanco
encima pasa de AA con 5.86:1. */
--marca-oscura: #2E5BD6;
/* El mismo azul, bajado de luminosidad: es el hover de lo anterior. No es un
tono nuevo -tiene el mismo matiz, 225 grados- sino el desplazamiento que
la identidad autoriza para derivar estados. Da 7.2:1 sobre la banda clara
y 7.8:1 con blanco encima. */
--marca-oscura-hover: #2749B5;
/* El visto de los compromisos, dibujado aqui para no repetir el mismo SVG
en cada sitio donde haga falta. Se pinta con mask, asi que el color lo
pone quien lo use y no hay que tocar el dibujo. */
--visto: url('data:image/svg+xml;utf8,');
/* --- Medidas ----------------------------------------------------------- */
--ancho: 1160px;
--radio: 6px;
--paso-seccion: clamp(64px, 9vw, 112px);
--hueco: clamp(20px, 2.4vw, 28px);
/* --- Tipografias -------------------------------------------------------
IBM Plex Sans para todo e IBM Plex Mono para las cifras: metricas, horas
y referencias de pedido, que con cifras tabulares quedan en columna. Se
cargan desde fuentes/plex.css, en este mismo servidor. La pila de
respaldo mantiene la web legible si no llegan a descargarse. */
--fuente: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--fuente-cifras: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Nombres antiguos, mantenidos para que nada se rompa mientras quede algun
uso suelto. Todo apunta ya a la misma familia. */
--fuente-titular: var(--fuente);
--fuente-texto: var(--fuente);
}
/* 2. Reajuste base ======================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
/* Deja hueco bajo la cabecera fija al saltar a un ancla. */
scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
margin: 0;
}
body {
background: var(--fondo);
color: var(--texto);
font-family: var(--fuente);
/* 17 / 27 en escritorio, que es el cuerpo de la identidad. */
font-size: clamp(16px, 0.35vw + 15px, 17px);
font-weight: 400;
line-height: 1.59;
-webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
hr {
border: 0;
border-top: 1px solid var(--borde);
margin: var(--hueco) 0;
}
::selection { background: var(--marca); color: #FFFFFF; }
/* 3. Tipografia =========================================================== */
/* La escala es la de la identidad, al pie de la letra: 52/55 a peso 600 con
-2.5% de espaciado para el titular grande, 34/39 a 500 con -2% para el
segundo, 22/29 a 500 para el tercero. Los clamp solo encogen esos valores
en pantallas estrechas; el maximo es siempre el numero de la identidad.
Peso 600 y 500, nunca 700: con IBM Plex Sans el 700 pesa demasiado a estos
tamaños y rompe el registro serio que pide la marca. */
h1, .titular-xl {
font-family: var(--fuente);
font-size: clamp(32px, 4.6vw, 52px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.06;
color: var(--texto);
text-wrap: balance;
}
h2, .titular-l {
font-family: var(--fuente);
font-size: clamp(24px, 3vw, 34px);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--texto);
text-wrap: balance;
}
h3, .titular-m {
font-family: var(--fuente);
font-size: clamp(19px, 1.7vw, 22px);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.32;
color: var(--texto);
text-wrap: balance;
}
h4, h5, h6 {
font-family: var(--fuente);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.4;
color: var(--texto);
}
/* Cifras: metricas, horas, precios y referencias de pedido. Plex Mono a peso
500 con cifras tabulares, para que un 1 ocupe lo mismo que un 8 y las
columnas de numeros queden alineadas. */
.cifra {
font-family: var(--fuente-cifras);
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* Separacion por defecto entre un titular y lo que venga detras. */
.titular-xl + *,
.titular-l + *,
.titular-m + * { margin-top: 16px; }
.entradilla {
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.55;
color: var(--texto-tenue);
max-width: 62ch;
}
.apunte {
font-size: 14px;
line-height: 1.5;
color: var(--texto-tenue);
}
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; color: var(--texto); }
code, kbd, samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
background: var(--superficie);
border: 1px solid var(--borde);
border-radius: 4px;
padding: 1px 5px;
}
/* 4. Enlaces y foco ======================================================= */
a {
color: var(--marca);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.15s ease;
}
a:hover { color: var(--marca-hover); text-decoration-thickness: 2px; }
/* Foco de teclado. El outline no se elimina en ningun selector: solo se le
cambia el color donde el ambar no se veria, que es la banda clara. */
:focus-visible {
outline: 2px solid var(--accion);
outline-offset: 3px;
border-radius: 2px;
}
.seccion--banda :focus-visible { outline-color: var(--tinta); }
/* 5. Botones ============================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 12px 24px;
border: 1px solid transparent;
border-radius: var(--radio);
font-family: var(--fuente-texto);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn + .btn { margin-left: 12px; }
.btn-accion {
background: var(--accion);
color: var(--tinta);
border-color: var(--accion);
}
.btn-accion:hover { background: var(--accion-hover); border-color: var(--accion-hover); color: var(--tinta); }
.btn-accion:active { background: var(--accion-pulsado); border-color: var(--accion-pulsado); color: var(--tinta); }
/* Azul solido. Usa el azul oscuro porque el blanco sobre el azul claro se
queda en 3.72:1 y no llega a AA; sobre este llega a 5.69:1. */
.btn-marca {
background: var(--marca-oscura);
color: #FFFFFF;
border-color: var(--marca-oscura);
}
.btn-marca:hover { background: var(--marca-pulsado); border-color: var(--marca-pulsado); color: #FFFFFF; }
.btn-marca:active { background: var(--marca-oscura-hover); border-color: var(--marca-oscura-hover); color: #FFFFFF; }
.btn-contorno {
background: transparent;
color: var(--texto);
border-color: var(--borde);
}
.btn-contorno:hover { border-color: var(--marca); color: var(--marca); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* Fila de botones. La regla .btn + .btn de arriba solo sabe separar en
horizontal: cuando los botones no caben en el ancho —y a 360 px no caben—
se apilan pegados y con el segundo sangrado 12 px. Envolverlos aqui les da
la misma separacion en fila y apilados. */
.botonera {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.botonera .btn + .btn { margin-left: 0; }
/* Sobre la banda clara el contorno necesita un borde que se vea. */
.seccion--banda .btn-contorno { color: var(--tinta); border-color: var(--borde); }
.seccion--banda .btn-contorno:hover { border-color: var(--marca); color: var(--marca); }
/* 6. Contenedores y secciones ============================================= */
.envoltura {
width: 100%;
max-width: var(--ancho);
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 40px);
}
.seccion { padding-block: var(--paso-seccion); }
/* La portada no necesita el paso entero por abajo. La seccion que viene
detras ya trae el suyo, y sumados dejaban 224 px de vacio en escritorio:
un cuarto de pantalla en blanco que partia la pagina en dos y alejaba el
primer argumento del titular. */
main > .seccion:first-child { padding-bottom: calc(var(--paso-seccion) * 0.3); }
/* Banda clara. Se redefinen las variables en el propio selector para que todo
lo de dentro (titulares, texto tenue, bordes, tarjetas, tablas) se recalcule
sin tocar una sola regla mas. */
.seccion--banda {
--fondo: var(--banda);
--superficie: #FFFFFF;
--borde: #DDE3EC;
--texto: var(--tinta);
--texto-tenue: #5A6675; /* 7.5:1 sobre la banda */
--marca: #2E5BD6; /* 5.3:1 sobre la banda; el azul claro se queda en 3.4:1 */
--marca-hover: var(--marca-oscura-hover); /* mas oscuro, para que el hover se note */
background: var(--banda);
color: var(--tinta);
}
.seccion--estrecha > .envoltura { max-width: 760px; }
/* Encabezado de seccion: titular, entradilla y aire antes del contenido. */
.seccion__cabeza { max-width: 68ch; margin-bottom: clamp(32px, 4vw, 48px); }
/* 6b. Marca =============================================================== */
/* El lockup se compone aqui, en HTML, y no dentro de un SVG con texto: asi el
wordmark usa la IBM Plex Sans de verdad que la pagina ya tiene descargada,
se ve nitido a cualquier tamaño y hereda el color de donde este puesto. Los
SVG sueltos de img/ quedan para lo de fuera: documentos, redes, firma de
correo y todo lo que no pasa por esta hoja de estilos.
El lockup entero se escala con una sola medida, el font-size del enlace.
Todo lo de dentro va en em, incluido el aire de 0.3 x el lado del icono que
fija la identidad. */
.marca {
display: inline-flex;
align-items: center;
gap: 0.3em;
font-size: 32px;
text-decoration: none;
color: var(--texto);
}
.marca__icono {
width: 1em;
height: 1em;
flex: none;
}
.marca__nombre {
font-family: var(--fuente);
font-size: 0.78em;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1;
color: currentColor;
}
/* Los tres puntos son lo unico que se mueve en todo el sistema. Al pasar por
encima del logo escriben, que es exactamente lo que el simbolo representa:
una conversacion en curso. Es un guiño, no un adorno; por eso solo ocurre
en el hover y nunca a quien ha pedido que no se mueva nada. */
@keyframes marca-escribe {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: no-preference) {
.marca:hover .marca__punto,
.marca:focus-visible .marca__punto {
animation: marca-escribe 1.1s ease-in-out infinite;
}
.marca:hover .marca__punto:nth-of-type(2),
.marca:focus-visible .marca__punto:nth-of-type(2) { animation-delay: 0.12s; }
.marca:hover .marca__punto:nth-of-type(3),
.marca:focus-visible .marca__punto:nth-of-type(3) { animation-delay: 0.24s; }
}
/* Los tres puntos, sueltos. Son la firma del sistema: el mismo gesto del
logotipo, repetido en el antetitulo de portada, en los iconos y en el
widget. Van en ambar porque señalan que algo esta pasando. */
.puntos {
display: inline-flex;
align-items: center;
gap: 0.34em;
font-size: inherit;
flex: none;
}
.puntos i {
width: 0.44em;
height: 0.44em;
border-radius: 50%;
background: var(--accion);
}
/* Sobre la banda clara el ambar en pieza pequeña se pierde; ahi los puntos
pasan al azul oscuro, que si tiene cuerpo sobre claro. */
.seccion--banda .puntos i { background: var(--marca); }
@keyframes puntos-escriben {
0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
30% { transform: translateY(-0.28em); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
.puntos--vivos i { animation: puntos-escriben 1.4s ease-in-out infinite; }
.puntos--vivos i:nth-child(2) { animation-delay: 0.16s; }
.puntos--vivos i:nth-child(3) { animation-delay: 0.32s; }
}
/* Antetitulo: la linea corta que va encima del titular grande. Dice de que
va la pagina antes de que empiece el argumento, y lleva los tres puntos
delante para que la marca se reconozca ya en la primera linea. */
.antetitulo {
display: inline-flex;
align-items: center;
gap: 0.75em;
margin-bottom: 20px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.09em;
line-height: 1.4;
text-transform: uppercase;
color: var(--texto-tenue);
}
/* Compromisos. Va pegado a la llamada a la accion, que es donde el visitante
duda, y responde a lo que esta pensando en ese momento: "¿me va a costar
algo?", "¿me van a atar?", "¿donde acaban mis datos?".
Aqui no hay testimonios ni logos de clientes porque la regla del proyecto
prohibe inventarlos, y sin clientes publicos no hay ninguno que enseñar. Lo
que si hay son compromisos que se pueden cumplir hoy, y eso, dicho corto y
junto, hace el mismo trabajo. */
.compromisos {
display: flex;
flex-wrap: wrap;
gap: 10px 26px;
margin: 0;
padding: 0;
list-style: none;
}
.compromisos li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
line-height: 1.5;
color: var(--texto-tenue);
}
/* El visto va en azul, no en ambar: el ambar es solo de la accion, y aqui hay
cuatro a la vez. */
.compromisos li::before {
content: "";
flex: none;
width: 15px;
height: 15px;
margin-top: 3px;
background: var(--marca);
-webkit-mask: var(--visto) center / contain no-repeat;
mask: var(--visto) center / contain no-repeat;
}
.seccion--banda .compromisos li::before { background: var(--marca-oscura); }
/* Sin mask el pseudoelemento se veria como un cuadrado azul macizo. */
@supports not ((mask: none) or (-webkit-mask: none)) {
.compromisos li::before { background: none; }
}
/* Dato con fuente. Es la pieza que mas hace por que una inteligencia
artificial cite la pagina: un numero concreto, dicho en una frase que se
entiende sola, y con la fuente al lado para que se pueda comprobar.
La regla del proyecto es que aqui no entra ninguna cifra inventada. Todas
las que aparezcan llevan quien las publico y cuando, con enlace. */
.dato {
border-left: 3px solid var(--accion);
padding: 4px 0 4px 20px;
margin-block: 28px;
max-width: 62ch;
}
.dato__cifra {
display: block;
font-family: var(--fuente-cifras);
font-size: clamp(30px, 3.4vw, 40px);
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--texto);
}
.dato__texto {
margin: 8px 0 0;
font-size: 17px;
line-height: 1.55;
color: var(--texto);
}
.dato__fuente {
margin: 8px 0 0;
font-size: 13px;
line-height: 1.5;
color: var(--texto-tenue);
}
/* Iconos de producto. El trazo hereda el color del texto -de ahi el azul-,
y el acento ambar va fijado dentro de cada icono porque siempre es ambar:
marca el punto donde algo sucede y no depende del contexto. */
.icono {
width: 24px;
height: 24px;
flex: none;
color: var(--marca);
}
.icono--grande { width: 32px; height: 32px; }
/* El sprite se pega al principio del body. No se ve; solo guarda los dibujos
para que los