¿Cómo utilizar Variables y CSS dentro del Editor de bloques de Waclis?

El Editor de bloques de Waclis incluye herramientas avanzadas para trabajar con valores reutilizables y escribir CSS directamente sobre el contenido que estás diseñando.

Puedes acceder a ellas desde el icono de la varita del Editor de bloques.

Al abrirlo encontrarás dos pestañas principales:

Variables | CSS

Estas herramientas están pensadas principalmente para personalizaciones más avanzadas.

No son necesarias para cambiar normalmente:

• un texto;

• una imagen;

• un enlace;

• un color puntual;

• un margen;

• un Padding;

• un borde;

• una tipografía individual.

Para esos cambios recomendamos utilizar primero:

Contenido → Estilo → Avanzado

Variables y CSS resultan especialmente útiles cuando quieres tener un mayor control sobre el diseño.

Variables y CSS no son lo mismo

Antes de comenzar es importante diferenciar ambas herramientas.

Variables

Permite acceder a valores reutilizables relacionados con aspectos como:

• tipografías;

• colores;

• dimensiones;

• breakpoints.

Puedes pensar en ellas como valores de referencia que pueden ser utilizados por diferentes partes del diseño.

CSS

Permite escribir reglas directamente.

Por ejemplo:

.mi-tarjeta {
    border-radius: 16px;
}

Aquí estás indicando expresamente qué elemento debe recibir determinado estilo.

¿Cómo acceder a Variables y CSS?

Dentro del Editor de bloques localiza el icono de la varita.

Al abrirlo aparecerá un panel con:

Variables

y

CSS

Puedes alternar entre ambas pestañas según la herramienta que necesites.

Parte 1: Variables

Dentro de Variables encontrarás diferentes grupos de valores.

En la interfaz actual pueden aparecer secciones como:

• Bootstrap Variables;

• Font;

• Color;

• Dimensions.

Estas opciones permiten consultar y, en determinados casos, trabajar con valores reutilizables del sistema visual.

¿Qué es una variable?

Una variable es un valor al que puede hacerse referencia desde diferentes partes del diseño.

En lugar de repetir muchas veces:

#007bff

puede existir conceptualmente un valor denominado:

Primary

que representa ese color dentro del sistema visual.

De la misma manera pueden existir variables para:

• tipografías;

• colores;

• dimensiones;

• puntos de corte responsive.

¿Por qué son útiles las variables?

Principalmente porque ayudan a mantener consistencia.

Supongamos que varios componentes utilizan el mismo color principal.

En lugar de trabajar con distintos tonos elegidos manualmente en cada elemento, un sistema de variables permite mantener referencias comunes.

Esto resulta especialmente útil en diseños grandes.

Bootstrap Variables

Dentro del panel encontrarás un grupo denominado:

Bootstrap Variables

Waclis utiliza actualmente Bootstrap 4 en la Página web.

Estas variables forman parte de la estructura visual sobre la que pueden apoyarse determinados componentes del editor.

Si no tienes una necesidad técnica concreta, recomendamos no modificar estas variables indiscriminadamente, ya que un cambio puede alcanzar múltiples elementos.

Diferencia entre cambiar una variable y cambiar un elemento

Supongamos que quieres cambiar solamente el color de un botón.

Puedes seleccionar ese botón y utilizar:

Estilo → Background Color

Eso es una modificación puntual.

En cambio, modificar una variable utilizada por diferentes elementos puede tener un alcance mucho mayor.

Por eso debes preguntarte siempre:

¿Quiero cambiar este elemento o quiero cambiar un valor reutilizado por varios elementos?

Font

Dentro de Variables encontrarás un grupo relacionado con:

Font

Entre los valores disponibles aparecen referencias como:

• Font family sans serif;

• Font family monospace.

Font family sans serif

Representa una familia tipográfica de tipo sans serif utilizada como referencia dentro del sistema.

Las tipografías sans serif son aquellas que no poseen pequeños remates en los extremos de sus caracteres.

Son habituales en interfaces y sitios web.

Font family monospace

Representa una familia tipográfica donde los caracteres utilizan un ancho uniforme.

Se utiliza habitualmente en:

• código;

• datos técnicos;

• contenidos donde se necesita alineación de caracteres.

¿Debo modificar estas variables para cambiar un título?

Normalmente no.

Si quieres cambiar la tipografía de:

un único título

utiliza:

Estilo → Typography → Font family

Las Variables tienen un alcance más general y están pensadas para un nivel de personalización diferente.

Color

Dentro de Variables aparece un grupo:

Color

donde encontrarás diferentes colores y referencias semánticas.

Entre los visibles en la interfaz se encuentran:

• Blue;

• Indigo;

• Purple;

• Pink;

• Red;

• Orange;

• Yellow;

• Green;

• Teal;

• Cyan;

• White;

• Gray;

• Gray dark;

• Primary;

• Secondary;

• Success;

• Info;

• Warning;

• Danger;

• Light;

• Dark.

Colores directos y colores semánticos

Algunos nombres representan directamente una familia de color:

Blue
Red
Green
Yellow

Otros representan una función dentro de la interfaz:

Primary
Secondary
Success
Warning
Danger

¿Qué significa Primary?

Primary normalmente representa el color principal utilizado por determinados componentes.

Por ejemplo:

• botones;

• enlaces;

• controles;

• elementos destacados.

Secondary

Puede utilizarse como color secundario o complementario.

Success

Suele asociarse visualmente a estados positivos.

Por ejemplo:

• confirmaciones;

• operaciones correctas;

• resultados satisfactorios.

Warning

Puede representar información que requiere atención.

Danger

Puede utilizarse para estados de:

• error;

• advertencia importante;

• eliminación;

• acciones potencialmente destructivas.

Info

Suele utilizarse para información adicional o contextual.

Light y Dark

Representan tonos claros y oscuros reutilizables.

¿Por qué no conviene modificar estos valores sin revisar el resultado?

Porque una variable como:

Primary

puede ser utilizada por más de un componente.

Si cambias su valor podrías modificar simultáneamente diferentes elementos.

Esto puede ser útil si buscas una personalización global coherente.

Pero puede resultar inesperado si solamente querías cambiar un botón.

Ejemplo

Quieres que un único botón tenga fondo rojo.

No necesitas modificar:

Primary

Puedes seleccionar el botón y utilizar:

Estilo → Background Color

Cuándo tendría sentido trabajar con una variable de color

Puede tener sentido cuando estás realizando una personalización general y comprendes qué elementos utilizan esa referencia.

Por ejemplo, quieres adaptar determinados componentes a una identidad visual común.

En ese caso, debes comprobar el resultado completo después de realizar el cambio.

Dimensions

Dentro de Variables encontrarás:

Dimensions

Aquí aparecen referencias relacionadas con los diferentes tamaños de pantalla utilizados para el comportamiento responsive.

Entre ellas puedes encontrar:

• xs;

• sm;

• md;

• lg;

• y los demás tamaños disponibles en la configuración.

¿Qué representan xs, sm, md, lg, etc.?

Son breakpoints o puntos de corte.

Permiten diferenciar distintos rangos de ancho de pantalla.

Conceptualmente:

xs
↓
pantallas más pequeñas

sm
↓

md
↓

lg
↓

xl / xxl
↓
pantallas progresivamente mayores

¿Para qué sirven los breakpoints?

Permiten que una Página web cambie su comportamiento según el ancho disponible.

Por ejemplo:

Desktop:
[ 1 ] [ 2 ] [ 3 ]

puede convertirse en:

Mobile:
[ 1 ]

[ 2 ]

[ 3 ]

Los breakpoints determinan en qué momento cambia la distribución.

No necesitas modificar los breakpoints para crear un diseño responsive

Esta aclaración es importante.

Para la mayoría de los diseños debes utilizar primero:

• Grid Row;

• tamaños de columnas;

• vistas de dispositivos;

• Hide based on device screen width;

• Width;

• Max Width;

• Margin;

• Padding.

No necesitas cambiar las variables globales de dimensiones.

Modificar breakpoints es una acción avanzada

Un cambio en estos valores puede alterar la forma en que diferentes componentes interpretan:

• celular;

• tablet;

• computadora;

• pantallas grandes.

Por eso recomendamos mantener los valores existentes salvo que tengas una necesidad técnica muy concreta y hayas evaluado su alcance.

Variables: ¿cuándo utilizarlas?

Las Variables pueden resultar útiles cuando:

• necesitas revisar valores del sistema visual;

• quieres mantener consistencia;

• realizas una personalización avanzada;

• comprendes qué elementos utilizan determinada variable;

• necesitas trabajar con la estructura responsive a un nivel técnico.

¿Cuándo no utilizarlas?

No necesitas abrir Variables para:

• cambiar una fotografía;

• cambiar el color de una tarjeta;

• aumentar el Padding de un botón;

• modificar un título;

• crear una animación;

• ocultar un elemento en móvil.

Utiliza primero las herramientas específicas del componente.

Parte 2: CSS

Junto a Variables encontrarás:

CSS

Esta pestaña permite escribir reglas CSS directamente dentro del entorno del Editor de bloques.

Los cambios pueden reflejarse visualmente sobre el contenido mientras trabajas.

¿Qué es CSS?

CSS es el lenguaje utilizado para controlar la apariencia de los elementos de una Página web.

Por ejemplo:

.mi-titulo {
    font-size: 32px;
}

indica que los elementos con:

class="mi-titulo"

deben utilizar un tamaño de 32 píxeles.

Estructura básica de una regla CSS

Una regla suele tener esta forma:

.selector {
    propiedad: valor;
}

Por ejemplo:

.servicio-card {
    padding: 24px;
}

Selector

Indica qué elementos quieres modificar:

.servicio-card

Propiedad

Indica qué quieres cambiar:

padding

Valor

Indica cómo quieres configurarlo:

24px

Ejemplo completo

.servicio-card {
    background-color: #ffffff;
    padding: 24px;
    border-radius: 16px;
}

Esta regla configura:

• fondo blanco;

• espacio interior;

• esquinas redondeadas.

CSS aplicado inmediatamente

Cuando escribes una regla dentro de la pestaña CSS puedes comprobar su efecto sobre el diseño.

Esto permite realizar ajustes y observar el resultado sin depender únicamente de una interpretación del código.

Aun así, después de finalizar debes comprobar también la Página web mediante:

Ver página

Antes de escribir CSS identifica el elemento

No comiences por:

div {
}

o:

img {
}

sin saber qué elementos alcanzará esa regla.

Antes:

1. selecciona el elemento;

2. abre Navigator;

3. revisa Class;

4. revisa ID;

5. identifica el scope de la sección.

Ejemplo

Quieres cambiar solamente las tarjetas de Servicios.

Puedes utilizar:

class="servicio-card"

y escribir:

.servicio-card {
    border-radius: 16px;
}

Pero puede existir la misma clase en otro lugar

En bloques complejos conviene limitar todavía más el alcance.

Supongamos:

class="servicios-section"

identifica la sección.

Puedes utilizar:

.servicios-section .servicio-card {
    border-radius: 16px;
}

Ahora el cambio queda limitado a:

servicio-card dentro de servicios-section.

Scope: uno de los conceptos más importantes al trabajar con CSS

Scope significa limitar el alcance de una regla.

Por ejemplo, esta regla:

img {
    border-radius: 20px;
}

puede alcanzar muchas imágenes.

Una alternativa:

.equipo-section img {
    border-radius: 20px;
}

limita el cambio a imágenes dentro de Equipo.

Una alternativa aún más precisa:

.equipo-section .equipo-foto {
    border-radius: 20px;
}

identifica exactamente las fotografías correspondientes.

Evita selectores globales innecesarios

Utiliza con especial cuidado reglas como:

body {
}

section {
}

div {
}

a {
}

img {
}

h1 {
}

h2 {
}

porque pueden modificar una cantidad mucho mayor de contenido.

Ejemplo de problema

Quieres que el título de Servicios sea rosa.

Escribes:

h2 {
    color: #eb0e93;
}

Pero todos los títulos h2 alcanzados por esa regla pueden cambiar.

Mejor alternativa

.servicios-section .servicios-titulo {
    color: #eb0e93;
}

Ahora la intención queda claramente delimitada.

Class o ID

Recuerda:

Class

.servicio-card {
}

se identifica mediante .

y puede aplicarse a varios elementos.

ID

#servicio-premium {
}

se identifica mediante #

y debe corresponder a un elemento único.

Ejemplo: estilo común más excepción

Todas las Cards:

.servicio-card {
    background: #ffffff;
    border-radius: 16px;
}

Una Card especial:

#servicio-premium {
    border: 3px solid #000;
}

CSS y Linked styles

El concepto de Linked styles sigue siendo importante.

Si varios elementos utilizan:

class="servicio-card"

entonces:

.servicio-card {
    padding: 24px;
}

afectará a todos.

Eso puede ser correcto.

Si querías modificar uno solo

Utiliza:

• un ID;

• una Class adicional;

• un selector más específico.

No necesariamente debes eliminar la Class común.

Ejemplo

Card 1
class="servicio-card"

Card 2
class="servicio-card destacado"

Card 3
class="servicio-card"

Puedes escribir:

.servicio-card {
    background: white;
}

.servicio-card.destacado {
    background: #f5f5f5;
}

CSS para Typography

Puedes utilizar propiedades como:

.servicios-titulo {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

Pero recuerda que muchas de estas configuraciones ya están disponibles desde:

Estilo → Typography

Utiliza CSS cuando necesites un comportamiento más específico o reutilizable.

CSS para Margin y Padding

Por ejemplo:

.servicios-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

o:

.servicio-card {
    margin-bottom: 20px;
}

Antes de escribir estas reglas también puedes comprobar:

Estilo → Margin / Padding

CSS para Border y Border radius

.servicio-card {
    border: 1px solid #ddd;
    border-radius: 16px;
}

CSS para sombras

Si necesitas una sombra más específica puedes utilizar:

.servicio-card {
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

Esto permite dar profundidad visual al elemento.

Utiliza sombras con moderación para mantener una estética consistente.

CSS para Hover

Puedes crear efectos adicionales mediante:

.servicio-card {
    transition: transform .3s ease;
}

.servicio-card:hover {
    transform: translateY(-5px);
}

Resultado:

cuando el visitante coloca el cursor sobre la Card, esta se desplaza ligeramente hacia arriba.

Transition

La propiedad:

transition

permite que un cambio no suceda de forma brusca.

Por ejemplo:

.boton-principal {
    transition: background-color .3s ease;
}

Hover con color

.boton-principal {
    background: #000;
    color: #fff;
}

.boton-principal:hover {
    background: #333;
}

Recuerda los dispositivos táctiles

Hover no funciona de la misma manera en celular.

No utilices un efecto Hover para esconder o revelar información imprescindible.

El contenido principal debe seguir siendo accesible.

CSS para imágenes

Una personalización frecuente es controlar cómo se adapta una imagen a su contenedor.

Por ejemplo:

.producto-imagen {
    width: 100%;
    height: 300px;
    object-fit: contain;
}

object-fit: contain

Intenta mostrar la imagen completa.

Puede resultar especialmente útil para:

• productos;

• logotipos;

• objetos;

• fotografías que no deben recortarse.

object-fit: cover

.categoria-imagen {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

hace que la imagen cubra todo el espacio disponible, aunque sea necesario recortarla.

Puede resultar útil para:

• banners;

• tarjetas de categorías;

• fondos;

• imágenes decorativas.

CSS responsive

Puedes utilizar:

@media (max-width: 768px) {
    .servicios-section {
        padding: 30px 16px;
    }
}

para aplicar un cambio en pantallas más pequeñas.

Pero primero utiliza las herramientas responsive del editor

Antes de crear una media query comprueba:

• Grid Row;

• columnas responsive;

• Wrap;

• Width;

• Max Width;

• Hide based on device screen width;

• Margin;

• Padding.

No agregues CSS adicional cuando el mismo comportamiento pueda resolverse fácilmente desde la interfaz.

Ejemplo de media query

Desktop:

.servicios-titulo {
    font-size: 42px;
}

Móvil:

@media (max-width: 768px) {
    .servicios-titulo {
        font-size: 30px;
    }
}

Evita acumular muchas media queries sin organización

Un bloque con:

@media...
@media...
@media...
@media...

para cada pequeño detalle puede convertirse rápidamente en una estructura difícil de mantener.

Antes de agregar otra regla revisa si puedes simplificar la estructura.

CSS y especificidad

En determinadas situaciones escribes una regla pero no observas ningún cambio.

Por ejemplo:

.servicio-card {
    background: red;
}

Puede existir otra regla con mayor especificidad.

Ejemplo

.servicios-section .servicio-card {
    background: blue;
}

es más específica que:

.servicio-card {
    background: red;
}

Esto puede provocar que el fondo continúe azul.

No agregues !important automáticamente

Podrías intentar:

.servicio-card {
    background: red !important;
}

Pero !important aumenta la prioridad y puede hacer más difícil modificar ese estilo posteriormente.

Antes comprueba:

• qué selector existe;

• su especificidad;

• Class;

• ID;

• Linked styles;

• scope.

Cuándo puede utilizarse !important

Puede ser necesario en determinados casos concretos donde otra regla externa tiene una prioridad difícil de controlar.

Pero debe ser una solución puntual, no la forma habitual de escribir CSS.

CSS existente en la pestaña

Al abrir CSS puedes encontrarte con reglas que ya existen.

Por ejemplo:

.row > .col-sm-4.col-5 > h3 {
    background-color: #dc3545;
}

No elimines una regla existente solamente porque no comprendes inicialmente qué hace.

Primero identifica:

• qué selector utiliza;

• qué elementos alcanza;

• qué propiedad modifica.

Leer un selector existente

Por ejemplo:

.row > .col-sm-4.col-5 > h3

es un selector más específico que simplemente:

h3

Está intentando localizar un h3 dentro de una estructura determinada.

Esto reduce el alcance de la regla.

El CSS puede provenir del diseño existente

Cuando trabajas con una sección prediseñada o personalizada, parte del CSS ya puede estar relacionado con su funcionamiento.

Antes de reemplazarlo:

1. identifica la sección;

2. comprueba el resultado actual;

3. cambia solamente lo necesario.

No borres todo el CSS para “empezar limpio”

Una sección puede depender de esas reglas para:

• layout;

• responsive;

• animaciones;

• imágenes;

• Hover;

• visibilidad.

Eliminar todo puede desmontar completamente la composición.

Realiza modificaciones puntuales

Supongamos que encuentras:

.producto-imagen {
    object-fit: cover;
}

y necesitas mostrar el producto completo.

Puedes cambiar solamente:

object-fit: cover;

por:

object-fit: contain;

No necesitas reescribir toda la sección.

Variables CSS propias

Además de las Variables del panel, CSS permite utilizar variables CSS propias dentro de una composición.

Por ejemplo:

.servicios-section {
    --card-radius: 16px;
    --card-gap: 20px;
}

Luego:

.servicios-section .servicio-card {
    border-radius: var(--card-radius);
}

¿Por qué utilizar variables CSS propias?

Puede resultar útil cuando un mismo valor se repite.

Por ejemplo:

--radius: 14px;

puede utilizarse en varias Cards.

Si después quieres cambiarlo, modificas una sola referencia.

Otro ejemplo

.categorias-section {
    --gap: 18px;
    --radius: 14px;
}

Luego:

.categorias-section .categorias-grid {
    gap: var(--gap);
}

.categorias-section .categoria-card {
    border-radius: var(--radius);
}

Variables del panel y variables CSS propias no son exactamente lo mismo

El panel Variables muestra valores disponibles dentro del entorno del editor.

En cambio:

--mi-variable

es una variable CSS que tú puedes definir dentro de tus propias reglas.

No debes confundir ambos conceptos.

Buen uso de variables CSS propias

Son especialmente útiles en bloques personalizados complejos.

Por ejemplo:

.promo-section {
    --promo-radius: 20px;
    --promo-gap: 24px;
    --promo-padding: 40px;
}

Puedes mantener varios valores importantes centralizados.

CSS y Bootstrap 4

Waclis utiliza actualmente Bootstrap 4 en la Página web.

Por eso puedes encontrar clases estructurales relacionadas con:

• Container;

• Row;

• columnas;

• botones;

• Cards;

• otros componentes.

No elimines o modifiques sus clases arbitrariamente.

Ejemplo de clases estructurales

Puedes encontrarte con:

row

o clases relacionadas con columnas.

Estas pueden ser necesarias para:

• anchos;

• grillas;

• responsive.

Si quieres cambiar la distribución, utiliza primero las herramientas visuales de Grid Row.

Agrega tus Classes sin destruir las existentes

Supongamos que tienes:

<div class="col-sm-4">

y quieres agregar una identificación propia.

No reemplaces automáticamente todo por:

<div class="mi-columna">

Puede ser más apropiado conservar:

<div class="col-sm-4 mi-columna">

si ambas Classes son necesarias.

CSS y el resto de la Página web

Una regla CSS puede alcanzar contenido fuera de la sección que estás observando.

Esto es particularmente importante en páginas que combinan:

• bloques editables;

• contenido dinámico;

• componentes de la plantilla.

Por eso el scope es fundamental.

Productos, Blog y otras áreas dinámicas

Supongamos que estás trabajando en:

Productos → Bloque editable debajo del menú

El catálogo dinámico de Waclis aparece después.

Si escribes:

.card {
    border: 5px solid red;
}

podrías afectar otros elementos que también utilicen .card.

Es preferible limitar la regla al bloque.

Ejemplo

Agrega una Class principal:

productos-intro

y utiliza:

.productos-intro .card {
    border: 5px solid red;
}

De esta manera reduces el riesgo de modificar Cards ajenas a tu bloque.

Header y Footer

Recuerda que Header y Footer no se editan mediante el Editor de bloques.

Si quieres personalizar globalmente esos elementos mediante CSS, utiliza las herramientas generales correspondientes de Waclis.

No intentes utilizar una regla dentro de un bloque como sustituto del Editor CSS general sin considerar su alcance.

¿CSS del bloque o Editor CSS general?

Puedes pensar en esta regla:

Modificación específica del contenido creado con bloques

Trabaja de forma localizada dentro del bloque.

Modificación general de la Página web

Por ejemplo:

• Header;

• Footer;

• listado dinámico;

• estructura global;

puede corresponder al Editor CSS general.

Evita duplicar reglas

Si una personalización general ya existe en el Editor CSS, agregar otra versión dentro del bloque puede generar:

• conflictos;

• especificidad;

• dificultades de mantenimiento.

Intenta mantener claro dónde vive cada personalización.

CSS y Code editor

La pestaña CSS no debe confundirse con:

Code editor

CSS está destinada a escribir reglas de estilo.

Code editor puede mostrar:

• HTML;

• estilos;

• scripts;

• estructura general;

• recursos externos.

Para una modificación visual específica normalmente es preferible trabajar desde CSS antes que recorrer todo el Code editor.

CSS y Editar código HTML

Tampoco es lo mismo que:

Editar código HTML <>

Por ejemplo:

Quieres agregar:

class="promo-card"

Puedes hacerlo desde:

Contenido → Class

o mediante HTML si realmente necesitas intervenir sobre la estructura.

Después puedes utilizar CSS:

.promo-card {
    border-radius: 20px;
}

Herramientas separadas, flujo combinado

Puedes trabajar así:

1. Navigator
↓
2. Seleccionar Card
↓
3. Contenido → Class
↓
4. Agregar: promo-card
↓
5. Varita → CSS
↓
6. Escribir .promo-card { ... }

No necesitas modificar todo desde Code editor.

Trabajar con CSS generado por una IA

ChatGPT, Claude o Gemini pueden ayudarte a generar reglas CSS.

Pero es importante proporcionar contexto.

Mal pedido

Haz las tarjetas más modernas.

Es demasiado abierto.

Mejor pedido

La sección tiene la clase .servicios-section y cada tarjeta usa .servicio-card.

Quiero que las tarjetas tengan 16 px de Border radius, una sombra suave y que en Hover se desplacen 4 px hacia arriba.

No modifiques otras Cards ni otras secciones.

Debe funcionar en desktop y móvil.

Esto permite obtener un CSS mucho más controlado.

Revisa el selector que genera la IA

Si devuelve:

.card {
}

pero tú pediste modificar solamente Servicios, considera si debería ser:

.servicios-section .servicio-card {
}

No copies automáticamente todos los estilos propuestos

Comprueba:

• selector;

• propiedades;

• media queries;

• !important;

• Hover;

• ancho;

• altura.

Agrega solamente lo necesario.

Ejemplo de CSS seguro para una sección

HTML existente:

class="beneficios-section"

Tarjetas:

class="beneficio-card"

CSS:

.beneficios-section .beneficio-card {
    padding: 24px;
    border-radius: 16px;
}

Hover:

.beneficios-section .beneficio-card {
    transition: transform .3s ease;
}

.beneficios-section .beneficio-card:hover {
    transform: translateY(-4px);
}

Responsive:

@media (max-width: 768px) {
    .beneficios-section .beneficio-card {
        padding: 18px;
    }
}

Todas las reglas permanecen limitadas al mismo bloque.

No mezcles selectores sin necesidad

Una sección fácil de mantener utiliza una convención consistente.

Por ejemplo:

beneficios-section
beneficios-grid
beneficio-card
beneficio-icono
beneficio-titulo
beneficio-texto

Es más fácil de interpretar que mezclar:

box2
red-card
title-new
thing
custom3

Cómo probar una regla sin comprometer el diseño

Si no estás seguro de que el selector sea correcto, puedes realizar temporalmente un cambio fácil de detectar.

Por ejemplo:

.servicio-card {
    outline: 3px solid red;
}

Observa qué elementos quedan marcados.

Si son los correctos, elimina la prueba y escribe la regla definitiva.

Si aparecen más elementos de los esperados, debes mejorar el selector.

Otra opción: Background temporal

Puedes probar:

.servicio-card {
    background-color: red;
}

para identificar el alcance.

Después:

Deshacer

o elimina la regla de prueba.

No dejes CSS de diagnóstico en la versión final.

Si el CSS rompe la sección

Utiliza este procedimiento:

1. identifica la última regla agregada;

2. elimínala o comenta el cambio;

3. comprueba si la sección vuelve a funcionar;

4. revisa el selector;

5. revisa la propiedad;

6. revisa responsive;

7. vuelve a probar de forma incremental.

No agregues más CSS intentando compensar un error cuya causa todavía no conoces.

Si afecta otras secciones

El problema suele estar relacionado con el alcance.

Por ejemplo:

h2 {
}

puede necesitar convertirse en:

.mi-seccion h2 {
}

o mejor:

.mi-seccion .mi-titulo {
}

Si funciona en desktop pero falla en móvil

Revisa:

• Width;

• Height;

• Min Width;

• Margin;

• Padding;

• media queries;

• Grid;

• imágenes;

• posicionamiento.

No asumas automáticamente que necesitas otra media query.

Primero revisa la estructura.

Si el estilo no aparece

Comprueba:

1. que la Class exista;

2. que esté escrita exactamente igual;

3. que el selector sea correcto;

4. que no haya otra regla más específica;

5. que la propiedad sea válida;

6. que estés editando la sección correspondiente.

Errores al escribir Classes

HTML:

class="servicio-card"

CSS correcto:

.servicio-card {
}

CSS incorrecto:

servicio-card {
}

Sin el punto, CSS interpreta otra cosa.

Errores al escribir IDs

HTML:

id="servicio-premium"

CSS:

#servicio-premium {
}

Recuerda utilizar:

#

Nombres con espacios

Una Class no se escribe como una frase dentro del selector.

Si tienes:

class="servicio card"

eso representa dos Classes:

servicio
card

No una única Class llamada “servicio card”.

Utiliza guiones

Una alternativa clara:

servicio-card

Minúsculas y consistencia

Para nombres propios recomendamos utilizar convenciones sencillas y consistentes, por ejemplo:

servicio-card
servicio-titulo
servicio-imagen

Esto reduce errores al escribir selectores.

Flujo recomendado para trabajar con Variables

1. Abre la varita.

2. Selecciona Variables.

3. Identifica el grupo correspondiente.

4. Comprueba si el valor tiene alcance general.

5. Evita modificarlo si solamente necesitas cambiar un elemento.

6. Realiza un cambio únicamente cuando comprendas su alcance.

7. Revisa toda la sección.

8. Comprueba responsive.

9. Guarda.

10. Utiliza Ver página.

Flujo recomendado para trabajar con CSS

1. Selecciona el elemento.

2. Abre Navigator.

3. Revisa Class e ID.

4. Decide el scope.

5. Comprueba si puedes resolverlo desde Estilo.

6. Si no, abre Varita → CSS.

7. Escribe una regla específica.

8. Comprueba el resultado.

9. Revisa Linked styles.

10. Comprueba desktop.

11. Comprueba tablet.

12. Comprueba celular.

13. Guarda.

14. Utiliza Ver página.

Flujo recomendado para CSS generado por IA

OBJETIVO
↓
ELEMENTO
↓
CLASS / ID
↓
SCOPE
↓
RESTRICCIONES
↓
RESPONSIVE
↓
GENERAR CSS
↓
REVISAR SELECTORES
↓
APLICAR
↓
COMPROBAR

No copies primero el código y analices después.

Tabla rápida de referencia

Errores frecuentes

Modificar una Variable cuando solamente querías cambiar un botón

Utiliza Estilo para cambios individuales.

Cambiar breakpoints sin necesidad

Utiliza primero las herramientas responsive.

Escribir CSS global

Limita el scope.

Utilizar .card sin comprobar si existe en otras partes

Utiliza una Class más específica.

Eliminar CSS existente sin saber qué controla

Puede ser necesario para la estructura.

Agregar !important a todas las propiedades

Revisa la especificidad primero.

Crear muchas media queries para compensar una estructura incorrecta

Revisa Navigator y Grid Row.

Modificar Classes estructurales de Bootstrap sin saber su función

Puedes alterar responsive y layout.

Reemplazar Classes existentes por una propia

Conserva las que sean necesarias.

Pensar que Variables del panel y --variables-css son lo mismo

Son conceptos relacionados, pero no idénticos.

Copiar CSS de una IA sin revisar los selectores

Puede afectar otras secciones.

No comprobar el frontend

Utiliza siempre Ver página después de guardar personalizaciones avanzadas.

Buenas prácticas

Cuando trabajes con Variables y CSS recomendamos:

• utilizar Variables solamente cuando comprendas su alcance;

• mantener los breakpoints existentes salvo una necesidad técnica concreta;

• utilizar Estilo para modificaciones simples;

• escribir CSS con Classes específicas;

• limitar el alcance mediante una Class principal de sección;

• utilizar nombres descriptivos;

• evitar selectores globales;

• conservar Classes estructurales;

• mantener IDs únicos;

• utilizar variables CSS propias en bloques complejos cuando mejoren el mantenimiento;

• realizar cambios pequeños;

• comprobar responsive después de cada modificación importante;

• utilizar Ver página antes de considerar terminado el trabajo.

En resumen

El icono de la varita del Editor de bloques permite acceder a dos herramientas avanzadas:

Variables

Permite consultar y trabajar con valores reutilizables relacionados con:

• tipografías;

• colores;

• dimensiones;

• breakpoints;

• variables del sistema visual.

Estas configuraciones pueden tener un alcance mayor al de un componente individual.

Por eso no deben utilizarse como reemplazo de Estilo para modificaciones sencillas.

CSS

Permite escribir reglas directamente.

Puedes utilizarlo para:

• estilos personalizados;

• Hover avanzado;

• transiciones;

• imágenes;

• sombras;

• media queries;

• excepciones;

• diseños complejos.

La regla más importante al trabajar con CSS es:

Limita siempre el alcance de tus estilos.

En lugar de:

.card {
}

es preferible trabajar, cuando corresponda, con algo como:

.servicios-section .servicio-card {
}

Esto reduce el riesgo de modificar otras partes de la Página web.

Antes de escribir CSS:

Navigator → Class/ID → Scope → Estilo visual → CSS si realmente es necesario.

Y después:

Desktop → Tablet → Celular → Guardar Cambios → Ver página.

Una buena organización de Variables y CSS permite crear bloques mucho más personalizados sin perder el control sobre el resto de la Página web.