Las secciones de beneficios o características permiten resumir rápidamente los principales atributos de un producto, servicio o propuesta.

Una estructura habitual puede ser:

                 TODO LO QUE NECESITAS

        Herramientas pensadas para simplificar
                 la gestión diaria


[ ICONO ]             [ ICONO ]             [ ICONO ]

Fácil de gestionar    Diseño responsive     Gestión centralizada

Administra...         Tu contenido...       Organiza...

También puedes trabajar con cuatro elementos:

[ ICONO ] [ ICONO ] [ ICONO ] [ ICONO ]

o seis:

[ A ][ B ][ C ]

[ D ][ E ][ F ]

En celular, la misma estructura puede transformarse en:

[ ICONO ]
BENEFICIO A
Descripción

[ ICONO ]
BENEFICIO B
Descripción

[ ICONO ]
BENEFICIO C
Descripción

En este tutorial aprenderás a:

• diferenciar características de beneficios;

• decidir qué conviene comunicar;

• combinar característica + beneficio;

• construir la sección con Section y Grid Row;

• utilizar Font Icon o Svg Icon;

• mantener una familia visual consistente;

• evitar iconos ambiguos;

• organizar 3, 4 o 6 elementos;

• adaptar 3 columnas a 2 y luego 1;

• escribir títulos breves;

• trabajar descripciones claras;

• mantener Cards o bloques con alturas naturales;

• utilizar Hover sin crear falsa interacción;

• clonar elementos correctamente;

• trabajar con Classes y Linked styles;

• evitar estadísticas o afirmaciones inventadas;

• revisar responsive;

• utilizar IA para mejorar el contenido sin inventar ventajas.

Característica y beneficio no son lo mismo

Esta es la distinción más importante del tutorial.

Una característica describe lo que algo tiene o hace

Por ejemplo:

Diseño responsive

Editor visual

Gestión centralizada

Integración con proveedores

Un beneficio explica por qué eso le importa al visitante

Por ejemplo:

Tu Página web se adapta a celulares, tablets y computadoras.

O:

Puedes actualizar contenidos sin depender de modificar código.

O:

Centraliza diferentes tareas desde un mismo entorno.

Conceptualmente

CARACTERÍSTICA
→ qué tiene / qué hace

mientras:

BENEFICIO
→ qué obtiene el usuario

Ejemplo

Característica:

Editor visual de bloques

Beneficio:

Personaliza el contenido de tu Página web mediante una interfaz visual.

Otro ejemplo

Característica:

Diseño responsive

Beneficio:

El contenido puede adaptarse a diferentes tamaños de pantalla.

No conviertas una lista de características en una lista de beneficios cambiando solamente las palabras

Ejemplo:

Característica:
Gestión centralizada

No inventes:

Beneficio:
Aumenta tus ventas un 70 %

si no existe evidencia para esa afirmación.

Primera regla

Los beneficios deben derivarse de funcionalidades reales, no de promesas inventadas.

¿Qué debería mostrar la sección?

Puedes utilizar tres enfoques.

Enfoque 1: características

Por ejemplo:

[ ICONO ]

Editor visual

Personaliza diferentes secciones desde el Editor de bloques.

Enfoque 2: beneficios

[ ICONO ]

Más autonomía

Actualiza el contenido de tu Página web utilizando herramientas de autogestión.

Enfoque 3: característica + beneficio

Esta suele ser una opción muy útil.

[ ICONO ]

Diseño responsive

Adapta la presentación del contenido para computadora, tablet y celular.

Aquí el título comunica la característica

y el Paragraph explica:

qué utilidad tiene.

¿Cuál conviene?

Depende de la Página web.

Producto técnico

puede necesitar:

CARACTERÍSTICA
+
BENEFICIO

Página comercial

puede priorizar:

BENEFICIO

y explicar la característica después.

Lo importante

es que el visitante no tenga que preguntarse:

“¿Y esto para qué me sirve?”

Antes de abrir el Editor

crea una lista.

Por ejemplo:

1. Editor visual
2. Responsive
3. Gestión centralizada
4. Integraciones
5. Personalización
6. Soporte

Después, para cada elemento, responde

¿Qué significa?

y:

¿Por qué podría importarle al usuario?

Ejemplo

Característica:
Responsive

Importancia:
El contenido debe poder utilizarse desde diferentes tamaños de pantalla.

Esto facilita mucho la redacción posterior.

¿Cuántos elementos debería mostrar?

No existe una cantidad obligatoria.

Pero algunos patrones suelen funcionar especialmente bien.

3 elementos

[ A ][ B ][ C ]

Muy claro para una sección resumida.

4 elementos

[ A ][ B ][ C ][ D ]

Puede funcionar cuando:

• títulos son cortos;

• descripciones son breves.

También puede organizarse:

[ A ][ B ]

[ C ][ D ]

6 elementos

[ A ][ B ][ C ]

[ D ][ E ][ F ]

Es un patrón muy útil para una sección completa.

8 o más

Puede empezar a resultar demasiado extenso.

En ese caso

considera:

• priorizar los principales;

• dividir en categorías;

• crear otra Section.

Segunda regla

No muestres veinte beneficios solo porque tienes espacio para agregarlos.

Una selección clara suele comunicar mejor.

¿Qué vamos a construir?

Crearemos una sección de seis elementos.

Desktop:

             PRINCIPALES CARACTERÍSTICAS

       Todo lo necesario para gestionar...


[ ICONO ]          [ ICONO ]          [ ICONO ]
Título A           Título B           Título C
Descripción        Descripción        Descripción


[ ICONO ]          [ ICONO ]          [ ICONO ]
Título D           Título E           Título F
Descripción        Descripción        Descripción

Tablet

podemos utilizar:

[ A ][ B ]

[ C ][ D ]

[ E ][ F ]

Mobile

A

B

C

D

E

F

Estructura conceptual

Section
└── Container
    ├── Heading area
    │   ├── Paragraph
    │   ├── Heading
    │   └── Paragraph
    │
    └── Grid Row
        ├── Column
        │   └── Feature Item
        │       ├── Font Icon / Svg Icon
        │       ├── Heading
        │       └── Paragraph
        ├── Column
        ├── Column
        └── ...

Puedes utilizar Card o una estructura simple

No es obligatorio que cada beneficio tenga:

Card con fondo + borde

También puede ser:

ICONO

Heading

Paragraph

directamente dentro de una Column.

La decisión depende del diseño.

Con Cards

┌────────────────────┐
│ ICONO              │
│                    │
│ Fácil de gestionar │
│                    │
│ Descripción...     │
└────────────────────┘

Sin Cards

ICONO

Fácil de gestionar

Descripción...

Ambas opciones pueden ser profesionales.

No agregues cajas solamente porque:

“una sección moderna tiene que tener Cards”.

Paso 1. Abre el Editor de bloques

Desde Menúes, ingresa al Bloque editable correspondiente mediante el icono de paleta.

Puedes utilizar esta sección en:

• Home;

• página de producto;

• Servicios;

• una Landing Page;

• otra página personalizada.

Paso 2. Crea una Section

Agrega o selecciona:

Section

Para este ejemplo:

Container width:
Boxed

Y:

Container height:
Auto

No necesitamos Full Height.

La cantidad de elementos debe determinar la altura de forma natural.

Paso 3. Agrega Padding general

Puedes trabajar desde:

Estilo → Padding

Como referencia inicial

puedes utilizar un espacio vertical generoso.

Por ejemplo:

72 px arriba
72 px abajo

Es solo una referencia.

Mobile puede requerir menos.

No fijes una altura total de Section.

Paso 4. Agrega el encabezado general

Una estructura puede ser:

Paragraph
Heading
Paragraph

Ejemplo

Texto superior:

CARACTERÍSTICAS

Heading:

Herramientas pensadas para simplificar tu gestión

Paragraph:

Combina diferentes funcionalidades según las necesidades de tu Página web y de tu negocio.

Utiliza información real

Los textos del tutorial son solo ejemplos.

Paso 5. Define la jerarquía del Heading

Si la página ya tiene H1:

esta sección puede utilizar:

H2

Los títulos individuales pueden utilizar:

H3

Conceptualmente:

H1
Título principal

    H2
    Características

        H3
        Gestión

        H3
        Responsive

        H3
        Personalización

No selecciones H4 o H5 simplemente porque visualmente tienen un tamaño más pequeño.

Ajusta:

Typography

para la apariencia.

Paso 6. Decide alineación del encabezado

Para esta sección usaremos:

Text align:
center

Puede funcionar muy bien sobre una grilla simétrica.

Ejemplo:

              CARACTERÍSTICAS

     Herramientas para gestionar tu negocio

          Descripción introductoria

Los beneficios individuales pueden permanecer:

left

o:

center

Según el estilo.

No necesitas centrar todo obligatoriamente.

Opción centrada

      [ ICONO ]

      Título

    Descripción

Opción alineada a la izquierda

[ ICONO ]

Título

Descripción

Para Cards con bastante texto

la alineación izquierda suele ser cómoda.

Paso 7. Agrega Grid Row

Debajo del encabezado agrega:

Grid Row

Para seis elementos

podemos trabajar inicialmente con tres columnas por fila.

Desktop:

4 + 4 + 4

Como Grid Row dispone de Wrap,

los siguientes elementos pueden continuar en otra fila según la estructura.

También puedes trabajar con más de un Grid Row

cuando quieras separar claramente las dos filas.

Por ejemplo:

Grid Row 1
├── A
├── B
└── C

Grid Row 2
├── D
├── E
└── F

¿Una Row o dos?

Depende de cómo prefieras gestionar el contenido.

Una Row con Wrap

puede ser más sencilla para una colección uniforme.

Dos Rows

pueden ofrecer mayor control sobre cada fila.

No existe una única solución obligatoria.

Paso 8. Configura desktop

Para tres columnas:

4 + 4 + 4

Cada beneficio obtiene aproximadamente un tercio del ancho disponible.

Este patrón funciona especialmente bien con:

• icono;

• título corto;

• descripción breve.

Paso 9. Configura tablet

Aquí debemos decidir.

Mantener tres columnas puede provocar:

[ A estrecho ][ B estrecho ][ C estrecho ]

En tablet puede ser mejor:

[ A ][ B ]

[ C ][ D ]

[ E ][ F ]

Es decir:

dos columnas.

Este patrón es especialmente cómodo cuando los Paragraphs tienen varias líneas.

Paso 10. Configura mobile

En celulares:

1 columna

Conceptualmente:

A

B

C

D

E

F

Cada elemento obtiene el ancho disponible.

No mantengas:

2 columnas

solo para reducir el largo de la página

si los textos quedan demasiado estrechos.

Una página mobile más larga no es necesariamente incorrecta.

La prioridad es:

• lectura;

• claridad.

Paso 11. Crea el primer elemento

Dentro de la primera Column crea:

Font Icon
Heading
Paragraph

Si utilizas Card:

Card
├── Font Icon
├── Heading
└── Paragraph

Construye solamente uno primero.

No crees los seis desde cero por separado.

Paso 12. Agrega Font Icon

Desde:

Componentes → Elementos → Font Icon

agrega el icono.

Selecciona un símbolo relacionado con el concepto.

Ejemplo

Característica:

Responsive

Un icono relacionado con:

• dispositivo;

• pantalla;

puede resultar comprensible.

Otro ejemplo

Configuración

puede utilizar un icono de:

• herramientas;

• ajustes;

si corresponde.

No existe un icono universal obligatorio.

Paso 13. Evita iconos ambiguos

Supongamos:

★

Puede significar:

• destacado;

• favorito;

• premium;

• calidad;

• valoración.

Si el significado depende demasiado de la interpretación:

el icono no debería actuar solo.

Acompáñalo siempre con:

Heading

El icono ayuda a reconocer.

El texto explica.

Paso 14. Utiliza una familia visual común

Evita:

A → icono outline
B → emoji
C → icono 3D
D → SVG ilustrado
E → icono sólido
F → fotografía

sin una razón.

Mejor:

todos Font Icon

O:

todos Svg Icon de la misma familia visual

O Images con tratamiento común.

Coherencia genera profesionalismo.

Paso 15. Font Icon vs Svg Icon

Puedes elegir:

Font Icon

o:

Svg Icon

Font Icon puede ser conveniente cuando:

• encuentras todos los símbolos necesarios dentro de un mismo sistema;

• necesitas iconografía simple.

Svg Icon puede ser útil cuando:

• necesitas un gráfico vectorial específico;

• tu identidad utiliza una iconografía SVG propia.

No mezcles ambos constantemente sin una lógica.

Paso 16. Agrega una Class compartida al icono

Por ejemplo:

feature-icon

Así todos los iconos pueden compartir:

• tamaño;

• color;

• Margin.

Si posteriormente cambias:

Font size

mediante Linked styles o CSS,

puedes mantenerlos consistentes.

Paso 17. Define tamaño

Como referencia, un icono puede utilizar:

36–48 px

en muchos diseños.

No es una medida obligatoria.

Lo importante:

• reconocible;

• no domine la Card.

Evita:

150 px

en un bloque pequeño

a menos que la composición realmente esté diseñada alrededor del icono.

Paso 18. Color del icono

Puede utilizar:

• color principal de marca;

• Text Color;

• color secundario.

No conviertas cada elemento en un color diferente automáticamente.

Por ejemplo:

A azul
B rojo
C verde
D naranja
E violeta
F amarillo

puede generar ruido.

Una misma paleta puede funcionar mejor.

Paso 19. Agrega Heading

Debajo del icono agrega:

Heading

Por ejemplo:

Diseño responsive

Si el encabezado de la sección es H2:

puede corresponder:

H3

Paso 20. Mantén títulos cortos

Ejemplos:

Diseño responsive

Gestión centralizada

Personalización visual

Contenido editable

Evita:

Sistema avanzado de gestión centralizada para la administración integral de contenidos

como título de una pequeña Card.

Puedes simplificar:

Gestión centralizada

Y explicar el resto en Paragraph.

Paso 21. Título de beneficio

Si estás priorizando el resultado:

puedes utilizar:

Gestiona con mayor autonomía

En lugar de:

Editor de bloques

Ambos enfoques pueden funcionar.

La elección depende de la estrategia de contenido.

Paso 22. Característica + beneficio

Un patrón especialmente útil:

Heading:
Editor visual

Paragraph:
Personaliza diferentes áreas de tu Página web utilizando herramientas de edición visual.

Otro:

Heading:
Responsive

Paragraph:
Adapta la presentación del contenido para diferentes tamaños de pantalla.

Así el visitante entiende:

QUÉ ES
+
PARA QUÉ SIRVE

Paso 23. Agrega Paragraph

Debajo del Heading:

Paragraph

Mantén una extensión breve.

Aproximadamente:

1–3 líneas desktop

puede ser cómodo,

dependiendo del ancho.

No utilices un límite rígido de caracteres.

Un texto debe ser:

• claro;

• real;

• suficiente.

Paso 24. Evita beneficios vagos

Ejemplo débil:

Mejora tu negocio

¿Cómo?

¿Por qué?

Mejor:

Centraliza la administración de diferentes contenidos desde tu panel.

si esa afirmación corresponde a la funcionalidad.

Otro beneficio vago:

Lleva tu empresa al siguiente nivel

Puede sonar atractivo,

pero no explica nada concreto.

Utiliza lenguaje que ayude a comprender.

Paso 25. No inventes números

Evita:

Aumenta tus ventas un 300 %

O:

Reduce tus costos un 80 %

O:

Más de 50.000 empresas confían...

salvo que sean datos reales y verificables que corresponda publicar.

El diseño no necesita estadísticas inventadas para verse convincente.

Paso 26. No utilices “el mejor”, “número 1” o “líder” sin fundamento

Por ejemplo:

La mejor plataforma del mercado

Es una afirmación diferente de:

Plataforma de gestión digital

Utiliza información que puedas sostener.

Paso 27. Diseña el bloque

Puedes utilizar una estructura sin Card:

Icon
Heading
Paragraph

O Card.

Para nuestro ejemplo utilizaremos una Card suave.

Agrega una Class:

feature-card

Y a la Section:

features-section

Esto permitirá personalizar de manera localizada.

Paso 28. Padding interno

Una Card necesita aire.

Una referencia puede ser:

24–32 px

No obligatorio.

Evita:

4px

porque el contenido puede sentirse pegado al borde.

Y evita:

80px

si reduce demasiado el espacio útil en mobile.

Paso 29. Border radius

Puedes utilizar un valor coherente con el diseño general.

Por ejemplo:

16px

No es obligatorio.

Mantén el mismo valor para todas las Cards,

salvo una variante intencional.

Paso 30. Background

Puedes utilizar:

Cards blancas

sobre:

fondo suave

O:

Section blanca
+
Cards con Border

No necesitas colores diferentes para cada beneficio.

Paso 31. Clona el primer elemento completo

Cuando la primera Card esté correctamente construida:

selecciónala desde:

Navigator

Utiliza:

Clonar

Crea las demás instancias.

No clones únicamente:

• icono;

• Heading;

• Paragraph;

individualmente.

Clonar la unidad completa ayuda a mantener:

• estructura;

• Padding;

• Classes.

Paso 32. Reemplaza todo en cada copia

Después de clonar:

revisa:

ICONO
HEADING
PARAGRAPH
ID

Si existe Link:

también:

URL

Aunque nuestra sección de ejemplo no necesita necesariamente CTA individual.

Paso 33. Características normalmente no necesitan Link individual

A diferencia de servicios,

puede ser suficiente:

ICONO
TÍTULO
DESCRIPCIÓN

No agregues:

Ver más →

a cada característica

si no existe información adicional real.

Eso puede saturar.

Un CTA general puede ser más apropiado.

Por ejemplo:

[ CONOCER TODAS LAS FUNCIONALIDADES ]

debajo de la sección.

Paso 34. No simules interacción

Si las Cards no son clicables:

no diseñes un Hover que parezca un Button.

Por ejemplo:

cursor pointer
+
Card sube
+
fondo cambia fuerte

puede hacer que el visitante intente seleccionar.

Si es contenido informativo:

mantén Hover sutil o ninguno.

Tercera regla

La apariencia debe coincidir con el comportamiento.

Paso 35. Hover sutil

Puedes utilizar:

• cambio de Border;

• sombra leve;

• pequeño cambio de icono.

Sin convertir toda la Card en una falsa acción.

Por ejemplo:

Normal:

Border suave

Hover:

Border un poco más visible

Eso puede ser suficiente.

Paso 36. No escondas contenido en Hover

Evita:

Normal:

solo icono

Hover:

aparece Heading + Paragraph

En celulares no existe el mismo comportamiento Hover que con mouse.

La información debe estar visible.

Paso 37. Clases compartidas

Conceptualmente puedes tener:

features-section
feature-card
feature-icon
feature-title
feature-description

No necesitas usar todas.

Utiliza solamente las que realmente faciliten:

• organización;

• CSS.

Paso 38. Linked styles

Puede ser muy útil.

Todos los iconos:

feature-icon

Todos los títulos:

feature-title

Todas las Cards:

feature-card

Si cambias:

Padding

en una Card y todas cambian,

puede ser exactamente lo deseado.

Si quieres una excepción

agrega una variante:

feature-card feature-card-highlight

Paso 39. Card destacada

Puede ser útil destacar una característica especialmente importante.

Pero pregunta:

¿Existe realmente una razón para destacarla?

No agregues:

MÁS IMPORTANTE

sin criterio.

Puedes simplemente utilizar una variación visual moderada.

Paso 40. No utilices Badge “Nuevo” eternamente

Si agregas:

NUEVO

debes mantenerlo.

Cuando la funcionalidad deje de ser nueva:

retíralo.

Paso 41. Mantén los títulos equilibrados

Ejemplo:

Responsive

Integraciones

Personalización

Y uno:

Sistema avanzado de administración integral multicanal

romperá la composición.

Puedes simplificar editorialmente.

Paso 42. No fijes Height del Heading

Evita:

.features-section .feature-title {
    height: 70px;
}

Puede cortar títulos futuros.

Permite crecimiento natural.

Paso 43. No fijes Height de la Card

Evita:

.feature-card {
    height: 300px;
}

Si una descripción crece:

puede desbordar.

Primero:

• equilibra contenido;

• utiliza estructura flexible si realmente la necesitas.

Paso 44. Alturas diferentes no siempre son un problema

Si una Card es ligeramente más alta:

puede seguir siendo perfectamente válida.

No sacrifiques claridad solamente por:

igualdad matemática

Busca equilibrio visual.

Paso 45. Si quieres altura uniforme

puedes utilizar una estructura flexible.

Por ejemplo, conceptualmente:

.features-section .feature-card {
    height: 100%;
}

Solo si las Columns y estructura permiten que tenga sentido.

No copies la regla sin comprobar.

Y no agregues:

height: 320px

como solución.

Paso 46. Sección sin Cards

También puede ser:

[ ICONO ]    [ ICONO ]    [ ICONO ]
Heading      Heading      Heading
Texto        Texto        Texto

Esta opción suele sentirse:

• más ligera;

• menos fragmentada.

Puede ser ideal cuando la página ya utiliza muchas Cards.

No todo necesita Border.

Paso 47. Diseño horizontal dentro de cada elemento

Otra variante:

[ ICONO ]  Heading
           Paragraph

Conceptualmente:

[✓]  Gestión sencilla
     Administra...

Puede ser muy útil para listas de características.

Estructura:

Feature Item
├── Icon Column
└── Text Column

No necesitas necesariamente Card.

Paso 48. ¿Cuándo utilizar diseño horizontal?

Puede ser útil cuando:

• iconos son pequeños;

• títulos son breves;

• necesitas una sección compacta.

Diseño vertical

puede ser mejor cuando:

• quieres mayor protagonismo visual;

• existen pocos beneficios.

Paso 49. Cuatro características

Desktop puede utilizar:

3 + 3 + 3 + 3

Pero si el contenido es largo:

6 + 6

dos por fila puede funcionar mejor.

No fuerces cuatro Columns pequeñas.

Paso 50. Cuatro características en tablet

Una buena opción suele ser:

[ A ][ B ]

[ C ][ D ]

Mobile:

A
B
C
D

Paso 51. Tres características

Desktop:

[ A ][ B ][ C ]

Tablet puede:

• mantener tres;

• pasar a una;

según contenido.

No existe obligación de pasar siempre por dos columnas.

Paso 52. Seis características

Desktop:

[ A ][ B ][ C ]
[ D ][ E ][ F ]

Tablet:

[ A ][ B ]
[ C ][ D ]
[ E ][ F ]

Mobile:

A
B
C
D
E
F

Este será nuestro patrón principal.

Paso 53. Ocho características

Puedes utilizar:

4 × 2

en desktop

si cada elemento es muy breve.

Pero si contienen Paragraph:

puede ser más apropiado:

2 × 4

o:

3 + 3 + 2

según diseño.

Evalúa legibilidad.

Paso 54. Si tienes muchas características, agrupa

Por ejemplo:

GESTIÓN
- ...
- ...

DISEÑO
- ...
- ...

AUTOMATIZACIÓN
- ...
- ...

Puede ser más claro que 18 Cards equivalentes.

Paso 55. No utilices demasiados iconos diferentes

Una sección con:

18 iconos

puede empezar a sentirse como un catálogo visual sin jerarquía.

Prioriza.

Paso 56. Responsive de iconos

Un icono de:

48px desktop

puede mantenerse similar en mobile.

No siempre necesitas reducirlo mucho.

Pero si utilizas:

80px

puede ser apropiado bajar.

Revisa visualmente.

Paso 57. Responsive de Cards

En mobile:

• reduce Padding si es excesivo;

• mantén suficiente aire.

No hagas:

Padding 48px

si deja el Paragraph en una columna extremadamente estrecha.

Tampoco:

Padding 5px

porque pierde estructura.

Paso 58. Responsive de Heading

Los títulos individuales normalmente no deberían necesitar tamaños extremos.

Si un H3 ocupa:

5 líneas

en mobile,

revisa primero el texto.

No reduzcas hasta que parezca un texto secundario.

Paso 59. Tablet es el punto crítico

Desktop:

3 columnas

puede funcionar.

Mobile:

1 columna

también.

Tablet es donde:

3 columnas

puede quedar demasiado estrecho.

Revisa:

• H3;

• Paragraph;

• icono.

Si hace falta:

pasa a dos columnas.

Paso 60. No utilices font-size diminuto para conservar columnas

Si necesitas:

12px

para que el contenido entre,

probablemente la grilla necesita menos columnas.

El layout debe adaptarse al contenido.

Paso 61. Sección de beneficios con CTA general

Después de la grilla puedes agregar:

[ CONOCER MÁS ]

O:

Ver todas las funcionalidades →

Solo si existe un destino útil.

No agregues CTA por obligación.

Paso 62. Separación entre elementos

Necesitas:

espacio horizontal
+
espacio vertical

Especialmente cuando Wrap crea varias filas.

Evita que:

fila 1

y:

fila 2

parezcan pegadas.

Puedes utilizar:

• Margin;

• Padding;

• Grid;

• CSS localizado.

Paso 63. No utilices margin-bottom global sobre .col-*

Evita:

.col-md-4 {
    margin-bottom: 30px;
}

Puede modificar otros Grids.

Mejor:

.features-section .feature-column {
    ...
}

si has creado una Class correspondiente.

Paso 64. CSS localizado

Por ejemplo:

.features-section .feature-card {
    height: 100%;
}

Y:

.features-section .feature-icon {
    margin-bottom: 16px;
}

Son ejemplos conceptuales.

Utiliza las Classes reales de tu estructura.

Paso 65. Evita .card global

No utilices:

.card {
    border-radius: 20px;
}

Puede cambiar otras Cards de la Página web.

Utiliza:

.features-section .feature-card {
    border-radius: 20px;
}

Paso 66. Evita i global

Font Icon puede depender de:

font-family

y otras propiedades.

No utilices:

i {
    font-family: Arial;
}

Puede romper todos los iconos.

Paso 67. Evita svg global

Si utilizas Svg Icon:

no hagas:

svg {
    width: 50px;
}

Puede afectar:

• logos;

• controles;

• otros iconos.

Utiliza scope.

Paso 68. No agregues Bootstrap adicional

Waclis utiliza:

Bootstrap 4

No necesitas cargar otra versión para crear una grilla de características.

Si una IA devuelve un CDN:

no lo agregues.

Paso 69. No necesitas JavaScript

Esta sección es:

contenido + layout + estilos

Puede construirse con:

• Editor;

• Bootstrap existente;

• CSS cuando sea necesario.

No agregues JavaScript para:

• Hover;

• grid;

• responsive.

Paso 70. Animate on scroll

Una vez que la estructura esté terminada

puedes utilizar:

Avanzado → Animate on scroll

Por ejemplo

animar:

la grilla

o las Cards de forma moderada.

Evita seis animaciones completamente diferentes.

Paso 71. Delay

No configures:

Card 1 → 0s
Card 2 → 1s
Card 3 → 2s
Card 4 → 3s
Card 5 → 4s
Card 6 → 5s

El visitante tardaría demasiado en ver toda la información.

Si utilizas un efecto escalonado:

mantén delays muy breves.

La información debe estar disponible rápidamente.

Paso 72. Beneficio vs estadística

No confundas una sección de beneficios con:

Counter

Beneficio:

Gestiona contenidos desde un mismo entorno

Counter:

500+

Son elementos diferentes.

Si necesitas cifras:

utiliza únicamente datos reales y verificables.

Paso 73. Beneficio vs Progress Bar

Tampoco utilices:

95 %

para representar:

Facilidad de uso

si ese porcentaje no proviene de una medición real.

Progress Bar no debe utilizarse para decorar afirmaciones subjetivas.

Paso 74. Beneficio vs servicio

Beneficio:

Ahorra tiempo de gestión

si puede sostenerse de acuerdo con la funcionalidad.

Servicio:

Diseño web

No mezcles dentro de la misma grilla:

Diseño web
Responsive
Soporte
Mayor autonomía

sin decidir qué representa cada elemento.

Mantén un mismo nivel conceptual.

Paso 75. Beneficio vs característica técnica

Puedes combinarlos mediante jerarquía.

Por ejemplo:

H3:
Editor visual

Paragraph:
Realiza cambios de contenido mediante herramientas de edición visual.

Esto es más claro que:

Editor visual

solo.

Paso 76. Sección para producto técnico

Puedes crear un encabezado:

CARACTERÍSTICAS

Y cada bloque:

H3 técnico
+
beneficio explicado

Ideal para:

• software;

• servicios tecnológicos;

• plataformas.

Paso 77. Sección orientada al cliente

Puede invertir:

H3:
Trabaja desde cualquier dispositivo

Paragraph:

El diseño responsive adapta la presentación a diferentes tamaños de pantalla.

Aquí:

beneficio primero,

característica después.

Ambas estrategias son válidas.

Paso 78. No inventes beneficios emocionales

Por ejemplo:

Vive sin preocupaciones

para una función simple

puede resultar exagerado.

Utiliza una relación real y directa entre:

funcionalidad
→ utilidad

Paso 79. No conviertas todos los textos en marketing vacío

Evita una sección completa de:

Potencia
Impulsa
Transforma
Revoluciona
Maximiza

sin explicar cómo.

El visitante necesita información concreta.

Paso 80. Prueba la sección sin iconos

Este es un excelente test.

Lee:

Heading
Paragraph

Heading
Paragraph

Heading
Paragraph

¿Se entiende?

Si no:

los iconos están compensando un problema de contenido.

Corrige el texto.

Paso 81. Prueba solamente los títulos

Lee:

Responsive
Gestión centralizada
Personalización
Integraciones
Contenido editable
Soporte

¿Forman un conjunto coherente?

Si uno es:

Empieza hoy

quizá no pertenece a la misma categoría.

Paso 82. Prueba solamente los iconos

Pregunta:

¿La familia se ve coherente?

No es necesario comprender todos sin texto,

pero sí deberían parecer parte de la misma interfaz.

Paso 83. Carga contenido real antes de finalizar

No diseñes con:

Característica 1
Lorem ipsum

Sustitúyelo lo antes posible.

El contenido real revelará:

• títulos largos;

• Cards más altas;

• problemas mobile.

Paso 84. Revisa el elemento más largo

Busca:

• Heading más largo;

• Paragraph más largo.

Ese es uno de los mejores tests para evaluar la robustez de la grilla.

Paso 85. Revisa el icono más complejo

Un icono puede tener una forma:

muy ancha

mientras otro:

muy estrecha

Aunque compartan el mismo Font size,

pueden sentirse diferentes visualmente.

Ajusta el sistema,

no cada elemento de forma completamente independiente.

Paso 86. Revisa desktop

Comprueba:

• 3 columnas;

• alineación;

• Padding;

• iconos;

• títulos;

• filas.

Pregunta:

¿Puedo recorrer los seis elementos rápidamente?

Paso 87. Revisa monitor grande

Con Boxed:

las Cards no deberían expandirse indefinidamente.

Si la sección se siente demasiado vacía:

no aumentes simplemente los iconos.

Revisa:

• Container;

• separación;

• cantidad de contenido.

Paso 88. Revisa tablet

Comprueba si:

3 columnas

continúa funcionando.

Si no:

configura:

2 columnas

No reduzcas Typography excesivamente.

Paso 89. Revisa mobile

Comprueba:

• una columna;

• Padding;

• Heading;

• Paragraph;

• iconos.

No debe existir scroll horizontal.

Paso 90. ¿Es necesario que la Card ocupe todo el ancho mobile?

Normalmente:

sí, dentro del Container

puede resultar cómodo.

Pero conserva Padding lateral del Container.

No hagas:

Card pegada al borde de la pantalla

sin una intención.

Paso 91. Revisa la separación mobile

Seis Cards una debajo de otra pueden convertirse en una sección larga.

Mantén suficiente separación,

pero evita:

80px

entre cada Card si genera demasiado vacío.

Paso 92. ¿Qué hacer si la sección se vuelve demasiado larga en celular?

No reduzcas todo hasta hacerlo ilegible.

Considera:

• menos beneficios;

• descripciones más directas;

• dividir la sección.

No escondas arbitrariamente tres beneficios en mobile.

La información debería mantenerse coherente entre dispositivos.

Paso 93. ¿Qué hacer si quiero mostrar solo tres en Home?

Perfectamente válido.

Puedes utilizar:

3 beneficios principales
+
CTA

Y desarrollar el resto en una página específica.

Home no necesita contener toda la documentación.

Paso 94. ¿Qué hacer si una característica cambia con frecuencia?

Recuerda mantener la sección actualizada.

No publiques:

Nueva funcionalidad

y la dejes indefinidamente.

Tampoco mantengas una característica que ya no existe.

Paso 95. ¿Qué hacer si un beneficio depende de una condición?

Explícalo correctamente.

No conviertas:

puede...

en:

siempre...

sin fundamento.

La precisión es más importante que una afirmación más impactante.

Paso 96. ¿Qué hacer si quiero una Card completa clicable?

Si existe un destino real,

debes estructurar correctamente la interacción.

No basta con Hover.

Para una sección de características normalmente no es necesario.

Un CTA general suele ser más simple.

Paso 97. ¿Qué hacer si quiero agregar Links individuales?

Solo si cada característica tiene:

• tutorial;

• página;

• información específica.

Por ejemplo:

Conocer responsive →

Pero si todas llevan a la misma página:

puede ser mejor un CTA general.

Paso 98. ¿Qué hacer si quiero utilizar Images en lugar de iconos?

Puede funcionar.

Por ejemplo:

captura
Heading
Paragraph

Pero entonces la sección comienza a parecerse más a:

• contenidos destacados;

• servicios;

• texto e imagen.

Decide qué patrón comunica mejor.

Paso 99. ¿Qué hacer si quiero combinar Font Icon y Svg Icon?

Puedes hacerlo

si visualmente pertenecen al mismo sistema.

Pero revisa:

• grosor;

• tamaño;

• estilo.

No los mezcles simplemente porque no encontraste el sexto icono.

Puede ser mejor buscar otra representación dentro de la misma familia.

Paso 100. ¿Qué hacer si no encuentro un icono exacto?

No necesitas un símbolo literal.

Por ejemplo:

Autonomía

no tiene un icono universal.

Puedes elegir un símbolo relacionado con:

• control;

• configuración;

• edición.

Lo importante es que el Heading explique el concepto.

Paso 101. ¿Qué hacer si un icono puede interpretarse negativamente?

Evítalo.

La iconografía debe reducir ambigüedad,

no agregarla.

Paso 102. ¿Qué hacer si todos los iconos desaparecen?

Busca CSS global sobre:

i
font-family
font-weight

Font Icon puede depender de una familia de fuente específica.

No reemplaces Font family globalmente.

Paso 103. ¿Qué hacer si todos los SVG cambian de tamaño?

Busca:

svg {
}

Utiliza una regla localizada.

Paso 104. ¿Qué hacer si una Card cambia y todas cambian?

Puede ser:

Linked styles

Pregunta:

¿Quiero que todas compartan ese estilo?

Si sí:

es correcto.

Si no:

agrega una Class de variante.

Paso 105. ¿Qué hacer si una Card debe tener otro color?

Por ejemplo:

feature-card feature-card-highlight

Aplica solamente la diferencia.

No dupliques toda la hoja de estilos.

Paso 106. ¿Qué hacer si necesito cambiar solo un icono?

Cambia el contenido del icono,

no la Class compartida de estilo.

El estilo común puede mantenerse.

Paso 107. ¿Qué hacer si una Card tiene un texto muy largo?

Primero:

• resume;

• elimina repetición;

• lleva detalle a otra sección.

Después revisa estructura.

No uses:

font-size: 11px

para hacerlo entrar.

Paso 108. ¿Qué hacer si todas las Cards quedan demasiado altas?

Puede existir:

• exceso de Padding;

• demasiada descripción.

No reduzcas Height.

Reduce contenido o espacios cuando corresponda.

Paso 109. ¿Qué hacer si no quiero Cards?

Elimina:

• Background;

• Border;

y mantén:

Icon
Heading
Paragraph

Esto puede crear un diseño más limpio.

No necesitas cambiar toda la estructura.

Paso 110. ¿Qué hacer si quiero un diseño tipo lista?

Puedes utilizar:

[ ICON ] Heading
         Paragraph

En dos columnas desktop.

Esta variante puede ser especialmente útil para seis u ocho características.

Paso 111. Utilizar IA para diferenciar característica y beneficio

Puedes utilizar ChatGPT, Claude o Gemini.

Prompt

Tengo estas funcionalidades reales:

[lista]

Para cada una identifica:

1. característica concreta;
2. beneficio directo para el usuario que pueda inferirse únicamente de esa característica.

No inventes:
- porcentajes;
- ventas;
- ahorros;
- resultados garantizados;
- funcionalidades no mencionadas.

Si un beneficio no puede sostenerse, indícalo.

IA para redactar Cards

Necesito una sección de características para una Página web.

Funcionalidades reales:
[lista]

Para cada elemento redacta:
- Heading de máximo 4 palabras;
- Paragraph de máximo 25 palabras.

El Paragraph debe explicar utilidad concreta.

No inventes beneficios ni estadísticas.
Español neutro.

IA para detectar marketing vacío

Revisa estos textos:

[pegar]

Marca frases demasiado genéricas como:
- potencia tu negocio;
- transforma tu empresa;
- lleva todo al siguiente nivel;

cuando no expliquen un beneficio concreto.

No reescribas todavía.

IA para equilibrar títulos

Estos son mis títulos:

[lista]

Analiza:
- longitud;
- consistencia gramatical;
- si unos son características y otros beneficios;
- si representan el mismo nivel conceptual.

No inventes nuevos conceptos.

IA para revisar beneficios inventados

Características reales:
[lista]

Textos comerciales actuales:
[lista]

Indica cuáles afirmaciones no pueden derivarse directamente de las características suministradas.

No busques información externa.
No inventes evidencia.

IA para elegir 3, 4 o 6 elementos

Tengo estas características:

[lista]

La sección irá en Home.

Analiza:
- cuáles son las más importantes para una primera lectura;
- si conviene mostrar 3, 4 o 6.

No elimines ninguna definitivamente.
Separa:
- principales;
- secundarias.

IA para planificar Grid

Necesito una sección de 6 características en Waclis.

Cada elemento contiene:
- Font Icon;
- H3;
- Paragraph de unas 20 palabras.

Objetivo:
Desktop: 3 columnas.
Tablet: 2 columnas.
Mobile: 1 columna.

Waclis utiliza Bootstrap 4.

Explícame cómo organizarlo con Grid Row.

No generes CSS si puede resolverse con el Grid del Editor.

IA para revisar iconos

Tengo estas características:

[lista]

Estoy considerando estos conceptos visuales para los iconos:

[lista]

Analiza:
- si son intuitivos;
- si alguno es ambiguo;
- si mantienen una lógica visual común.

No inventes iconos específicos de una librería que no te haya indicado.

IA para CSS localizado

Tengo una sección Waclis.

Class raíz:
.features-section

Cards:
.feature-card

Iconos:
.feature-icon

Necesito:
- estilo limitado solo a esta sección;
- Cards con Border radius coherente;
- iconos con tamaño uniforme;
- no modificar otras Cards ni Font Icon de la Página web.

Waclis utiliza Bootstrap 4.

No cambies HTML.
No agregues JavaScript.
Devuélveme solamente CSS localizado.

IA para Hover

Las Cards de:

.features-section .feature-card

son informativas y NO son clicables.

Necesito un Hover muy sutil que:
- no haga parecer que existe una acción;
- no modifique el layout;
- no utilice rotaciones;
- no esconda contenido.

Devuélveme solamente CSS localizado.

IA para detectar falsa interacción

Esta Card no es clicable.

Estilos actuales:
[pegar]

Analiza si:
- cursor;
- Hover;
- sombra;
- transformación;

pueden hacer pensar que se puede seleccionar.

No modifiques todavía el CSS.

IA para responsive

Tengo 6 Cards de características.

Desktop funciona en 3 columnas.

En tablet:
- títulos ocupan 3-4 líneas;
- Paragraphs quedan estrechos.

Analiza si conviene pasar a 2 columnas antes de reducir Typography.

No generes código todavía.

IA para detectar CSS global

Revisa este CSS:

[pegar]

Busca selectores demasiado globales relacionados con:

.card
.row
.col
h3
p
i
svg

Indica qué partes de Waclis podrían verse afectadas.

No modifiques el código.

IA para revisar clonación

Card original:
[HTML]

Card clonada:
[HTML]

Busca:
- IDs duplicados;
- icono no reemplazado;
- Heading no reemplazado;
- Paragraph repetido;
- Links duplicados si existen.

No inventes valores nuevos.

IA para convertir características técnicas en lenguaje comprensible

Tengo estas características técnicas:

[lista]

Necesito explicarlas para clientes no técnicos.

Para cada una:
- conserva el significado;
- utiliza lenguaje claro;
- no elimines limitaciones;
- no inventes resultados comerciales.

Devuelve:
Característica:
Explicación:

Buenas prácticas

Recomendamos:

• diferenciar características de beneficios;

• utilizar beneficios concretos;

• no inventar cifras;

• elegir pocos elementos prioritarios;

• mantener un mismo nivel conceptual;

• utilizar una familia coherente de iconos;

• mantener títulos breves;

• utilizar Paragraph para explicar utilidad;

• configurar responsive desde el comienzo;

• utilizar 3→2→1 cuando corresponda;

• clonar la unidad completa;

• actualizar todo después de clonar;

• utilizar Classes compartidas;

• mantener IDs únicos;

• utilizar Hover moderado;

• no simular interacción;

• revisar contenido real;

• probar tablet especialmente.

Errores frecuentes

Confundir característica con beneficio

Explica la utilidad.

Mostrar solo nombres técnicos

Agrega contexto para el visitante.

Escribir beneficios sin relación con la funcionalidad

No inventes.

Inventar porcentajes

Utiliza únicamente información verificable.

Utilizar “el mejor” o “número 1” sin fundamento

Evita afirmaciones no sustentadas.

Mostrar demasiados elementos

Prioriza.

Mezclar servicios y beneficios

Mantén una lógica común.

Mezclar características técnicas y CTA dentro de la misma grilla

Organiza jerarquías.

Utilizar títulos extremadamente largos

Resume.

Utilizar Paragraphs de 100 palabras

Lleva el detalle a otra sección.

Usar iconos ambiguos

Elige símbolos comprensibles.

Mezclar emojis, fotografías, SVG e iconos sin una lógica

Mantén coherencia.

Utilizar colores completamente diferentes en cada Card

Evita ruido innecesario.

Mantener 4 columnas estrechas

Reduce columnas.

Mantener 3 columnas en tablet cuando el contenido ya no entra

Utiliza 2.

Mantener 2 columnas en celular sin probar

Puede ser mejor 1.

Reducir Typography para conservar columnas

Adapta el Grid.

Fijar Height de Card

Puede cortar contenido.

Fijar Height del Heading

Puede romper responsive.

Agregar texto de relleno para igualar alturas

Prioriza claridad.

Crear Hover fuerte sobre Cards no clicables

Puede generar falsa interacción.

Ocultar contenido hasta Hover

No funciona bien en touch.

Agregar CTA individual sin destino real

No simules navegación.

Dejar #

Utiliza una URL real o elimina el Link.

Clonar y dejar el icono original

Revisa cada copia.

Clonar IDs

Mantén unicidad.

Aplicar .card globalmente

Puede afectar otras Cards.

Aplicar i globalmente

Puede romper Font Icon.

Aplicar svg globalmente

Puede afectar iconos y logos.

Aplicar .row globalmente

Puede alterar otros Grids.

Agregar Bootstrap

Waclis ya utiliza Bootstrap 4.

Agregar JavaScript para Hover o responsive

No es necesario.

Animar los seis elementos de formas diferentes

Mantén coherencia.

No utilizar contenido real al probar

El diseño puede romperse después.

Flujo profesional recomendado

1. LISTAR CARACTERÍSTICAS REALES
↓
2. IDENTIFICAR BENEFICIO DIRECTO
↓
3. PRIORIZAR 3 / 4 / 6 ELEMENTOS
↓
4. DEFINIR TÍTULOS
↓
5. REDACTAR DESCRIPCIONES
↓
6. CREAR SECTION
↓
7. CONFIGURAR BOXED / AUTO
↓
8. CREAR ENCABEZADO
↓
9. AGREGAR GRID ROW
↓
10. DEFINIR 3 COLUMNAS DESKTOP
↓
11. DEFINIR 2 TABLET
↓
12. DEFINIR 1 MOBILE
↓
13. CREAR PRIMER FEATURE ITEM
↓
14. AGREGAR ICONO
↓
15. AGREGAR H3
↓
16. AGREGAR PARAGRAPH
↓
17. DEFINIR CLASSES
↓
18. CLONAR UNIDAD COMPLETA
↓
19. REEMPLAZAR ICONOS
↓
20. REEMPLAZAR TEXTOS
↓
21. REVISAR IDS
↓
22. REVISAR LINKED STYLES
↓
23. AJUSTAR PADDING / TYPOGRAPHY
↓
24. CONFIGURAR HOVER SI APORTA
↓
25. REVISAR DESKTOP
↓
26. REVISAR TABLET
↓
27. REVISAR MOBILE
↓
28. GUARDAR CAMBIOS
↓
29. VER PÁGINA
↓
30. REVISAR LA SECCIÓN COMO VISITANTE

Checklist de contenido

• Definí si comunicaré características, beneficios o ambos.

• Todos los elementos pertenecen al mismo nivel conceptual.

• Los títulos son claros.

• Los Paragraphs explican utilidad.

• No repetí simplemente el título.

• No inventé beneficios.

• No inventé porcentajes.

• No inventé estadísticas.

• No utilicé afirmaciones absolutas sin fundamento.

• No hay demasiados elementos.

• Los más importantes aparecen primero.

Checklist de iconos

• Todos pertenecen a una misma línea visual.

• Los símbolos son comprensibles.

• Ningún icono es excesivamente ambiguo.

• Todos tienen tamaños coherentes.

• Los colores son consistentes.

• No dependemos únicamente del icono para comunicar.

• El Heading explica el concepto.

• No utilicé emojis mezclados sin intención.

• Si utilizo SVG, mantengo un estilo coherente.

Checklist de estructura

• Utilicé Section.

• Configuré Boxed o Full conscientemente.

• Utilicé Auto Height.

• Utilicé Grid Row.

• Cada elemento está dentro de una Column apropiada.

• Definí desktop.

• Definí tablet.

• Definí mobile.

• Utilicé Navigator.

• No utilicé Position absolute.

• No utilicé Widths fijas para crear la grilla.

Checklist de Cards

• Todas comparten una estructura equivalente.

• Padding es consistente.

• Border radius es consistente.

• Background es coherente.

• No fijé Height innecesariamente.

• No fijé Height de los títulos.

• La Card con más contenido sigue funcionando.

• Cloné la unidad completa.

• Reemplacé todo después de clonar.

• Los IDs son únicos.

Checklist de interacción

• La sección funciona sin Hover.

• La información principal está siempre visible.

• Hover es moderado.

• Una Card no parece clicable si no lo es.

• No utilicé cursor:pointer sin una acción real.

• Los Links tienen destino real cuando existen.

• No quedan valores #.

• Mobile no depende de Hover.

Checklist responsive

• Desktop utiliza una cantidad de columnas adecuada.

• Tablet sigue siendo legible.

• Pasé a 2 columnas si tres quedan estrechas.

• Mobile utiliza 1 columna cuando corresponde.

• Los H3 no ocupan demasiadas líneas.

• Los Paragraphs tienen un ancho cómodo.

• Los iconos no son excesivamente grandes.

• El Padding mobile es adecuado.

• No existe scroll horizontal.

• No oculté características para arreglar el layout.

Checklist técnico

• La Section tiene una Class propia si necesito CSS.

• Las Cards comparten una Class.

• Los iconos comparten una Class cuando corresponde.

• Revisé Linked styles.

• Los IDs son únicos.

• No modifiqué .card globalmente.

• No modifiqué .row globalmente.

• No modifiqué .col-* globalmente.

• No modifiqué i globalmente.

• No modifiqué svg globalmente.

• No agregué Bootstrap.

• No agregué JavaScript innecesario.

• El CSS adicional tiene scope.

Checklist final

• Utilicé contenido real.

• Revisé la característica con el Heading más largo.

• Revisé el Paragraph más largo.

• Revisé el icono más complejo.

• Guardé los cambios.

• Utilicé Ver página.

• Revisé desktop.

• Revisé tablet.

• Revisé celular.

• Revisé un dispositivo real cuando fue posible.

• La sección se comprende sin iconos.

• La sección se comprende sin animaciones.

• Las Cards parecen pertenecer al mismo sistema.

• El visitante puede entender por qué cada característica es relevante.

En resumen

Una buena sección de características no debería limitarse a:

ICONO
+
NOMBRE TÉCNICO

Puede ser mucho más útil:

ICONO
↓
CARACTERÍSTICA
↓
BENEFICIO / UTILIDAD

Por ejemplo

[ ICONO ]

Diseño responsive

Adapta la presentación del contenido para computadora, tablet y celular.

Esto responde:

¿QUÉ ES?
+
¿POR QUÉ ME IMPORTA?

Para seis elementos

un patrón muy sólido es:

DESKTOP
3 columnas

TABLET
2 columnas

MOBILE
1 columna

Es decir:

Desktop:

[ A ][ B ][ C ]
[ D ][ E ][ F ]

Tablet:

[ A ][ B ]
[ C ][ D ]
[ E ][ F ]

Mobile:

A
B
C
D
E
F

No mantengas más columnas a costa de:

• reducir demasiado Typography;

• quitar Padding;

• hacer ilegible el contenido.

Respecto de los iconos

ICONO
→ ayuda a reconocer

pero:

HEADING + PARAGRAPH
→ explican

Por eso

no dependas exclusivamente de un símbolo.

Respecto de las afirmaciones

FUNCIONALIDAD REAL
→ BENEFICIO QUE PUEDE SOSTENERSE

No:

FUNCIONALIDAD REAL
→ PORCENTAJE INVENTADO

Respecto de Hover

HOVER
→ detalle visual

No:

HOVER
→ información escondida

Y:

CARD CON HOVER
≠
CARD CLICABLE

El comportamiento debe coincidir con la apariencia.

Finalmente

el flujo correcto es:

FUNCIONALIDADES REALES
↓
BENEFICIOS REALES
↓
PRIORIZAR
↓
GRID
↓
ICONOS
↓
CONTENIDO
↓
RESPONSIVE
↓
ESTILO
↓
GUARDAR CAMBIOS
↓
VER PÁGINA

Una sección de características está bien construida cuando el visitante puede recorrerla rápidamente y responder:

“Entiendo qué ofrece esta solución y, sobre todo, entiendo por qué cada una de estas características puede ser útil para mí.”

Cuando consigues eso, los iconos dejan de ser simples elementos decorativos y pasan a formar parte de una estructura de comunicación realmente útil.