Estilos globales de Botones, Tarjetas, Secciones e Iconos (Tokens)

En véltica los botones, las tarjetas, las secciones y los iconos no tienen sus estilos copiados uno por uno: están enlazados a Tokens de Estilo.

Qué es un Token de Estilo y por qué mantiene consistente todo tu sitio

Un Token de Estilo es una plantilla de apariencia con nombre (por ejemplo, Botón principal, Tarjeta base o Sección secundaria).

Si tu sitio tiene 18 botones principales repartidos en cinco páginas y decides que ahora los quieres en forma de píldora y con sombra suave, no tienes que buscar los 18 botones: editas el token Botón principal una sola vez en el panel Marca y los 18 cambian al instante.

Además de los tokens que vienen de fábrica, en cada categoría puedes pulsar Agregar un estilo (+) para crear variantes propias (por ejemplo, un tercer estilo de botón o una tarjeta destacada).

Personalizar estilos de Botones (fuente, espaciado, fondo, borde, esquinas, sombra y efecto `Hover` al pasar el ratón)

En Marca → Tu marca → Estilos de botones tienes por defecto el Botón principal y el Botón secundario. Al abrir cualquiera de los dos puedes ajustar:

Tipografía y transformación: fuente, tamaño, peso, espaciado de letras y si el texto va en mayúsculas.
Espaciado interno (Padding): cuánto aire hay alrededor del texto (compacto, normal, grande o ancho).
Fondo, Borde y Redondeo: color de relleno, grosor y color del contorno, y radio de las esquinas (desde recto 0 px hasta píldora completa).
Sombra y Sombra interna: desde sombras sutiles o elevadas hasta bordes en relieve o sombras planas 2D estilo brutalista.
Al pasar el ratón (Hover): elige cómo reacciona el botón cuando el visitante pone el cursor encima en computadora (Automático, Oscurecer, Aclarar, Elevar, Brillo o Ninguno).

Personalizar estilos de Tarjetas (`Cards`) y el ajuste automático de superficie según el fondo de la sección

En Marca → Tu marca → Estilos de tarjetas configuras cómo se ven las cajas que envuelven tus servicios, características, precios o testimonios (Tarjeta base, Tarjeta con borde, Tarjeta con color):

Ajusta su relleno, borde, redondeo de esquinas, sombra y espaciado interno.
Adaptar tarjetas (Adaptar tarjetas): cuando esta opción está activa, las tarjetas ajustan automáticamente su tono de superficie según el fondo de la sección donde estén puestas. Así una tarjeta blanca sobre una sección blanca toma un ligero contraste o borde para no perderse en el fondo, y si la mueves a una sección oscura se adapta sola.

Personalizar estilos de Secciones (ancho del contenido, altura, fondos y alternancia automática de tonos)

En Marca → Tu marca → Estilos de secciones controlas las franjas que estructuran tus páginas (Sección base, Sección secundaria, Sección de acento):

Ancho del contenido: define el ancho máximo al que se alinean los bloques internos (por ejemplo 1200 px) o déjalo en Completo / Auto.
Espaciado vertical: el aire arriba y abajo de cada sección (que se reduce proporcionalmente en tablet y celular).
Alternar fondos (Alternar fondos): cuando está encendido, las secciones que tienen el fondo en modo Automático alternan solas entre el fondo principal y el Fondo alterno a medida que agregas o reordenas secciones en la página, respetando siempre las secciones a las que les hayas elegido un fondo oscuro o de color a mano.

Personalizar estilos de Iconos (principales y secundarios)

En Marca → Tu marca → Iconos puedes ajustar la apariencia global de los Iconos principales (los que encabezan tarjetas o bloques de características) y los Iconos secundarios (los que acompañan listas o detalles):

Elige el color del trazo, su grosor, el tamaño en píxeles y si llevan una caja o círculo de fondo (con su color, opacidad y redondeo de esquina).

Desvincular un elemento de su token global («Cambiar solo aquí») o volver a sincronizarlo

Cuando seleccionas en el lienzo un elemento que usa un token global y abres sus propiedades, verás el aviso Sincronizado con Estilo (Controlado por…) junto con cuántos elementos usan ese mismo estilo. Tienes dos caminos:

Editar estilo global (Editar en Estilo): lo que cambies se aplicará a todos los elementos del sitio que usen ese token.
Cambiar solo aquí (Desvincular del token): desengancha únicamente ese elemento del estilo global para que puedas ponerle un color, borde o tamaño único sin afectar al resto del sitio.

Si más adelante te arrepientes y quieres que ese elemento vuelva a obedecer a tu marca, basta con abrir su selector de Token de Estilo en la barra contextual o en el inspector y volver a asignarle el estilo global (por ejemplo, Botón principal o Tarjeta base).

Copiar y pegar el estilo entre elementos desde la barra contextual

Si personalizaste un elemento suelto y quieres llevar ese mismo aspecto a otro elemento similar, puedes copiar su formato o convertirlo directamente en un nuevo token desde el inspector pulsando Convertir en token, poniéndole un nombre para poder aplicarlo en un clic a cualquier otra pieza del sitio.