Selección de tarifa Plantilla CSS

Las cabeceras verdes de los planes definen el estilo de las tarjetas de precios

Las dos tarjetas de precios establecen un sistema visual claro que se puede perfeccionar como plantilla CSS sin modificar la estructura comparativa. Las cabeceras en verde brillante ofrecen a ambos planes un punto de anclaje visual compartido, mientras que los grandes precios en blanco y los nombres destacados de los planes aportan un énfasis inmediato dentro de cada tarjeta. El área carbón detrás del texto introductorio contrasta con la sección inferior blanca, ayudando a que la zona de planes se perciba visualmente diferenciada del mensaje inicial.

Las esquinas inferiores redondeadas y las sombras suaves separan las tarjetas del fondo más claro y añaden profundidad sin incorporar otra región de contenido. Este mismo tratamiento puede conservarse en ambas tarjetas para que «Para equipos» y «Personal» sigan siendo comparables en lugar de parecer ofertas inconexas. El espaciado, la escala tipográfica, el tratamiento de los botones, los detalles de los bordes y la intensidad cromática pueden ajustarse en torno a los nombres de planes, precios, periodos de facturación, listas de características y botones de acción existentes. Los ocho elementos de la lista deben mantener una alineación legible y un ritmo uniforme, especialmente donde aparecen etiquetas más extensas como páginas ilimitadas, formularios, HTTPS, datos o soporte.

Esta interpretación de diseño resulta útil cuando la sección debe comunicar diferencias mediante jerarquía y contraste. Las reglas visuales pertenecen a este bloque de precios: la transición de oscuro a blanco enmarca el contenido, mientras que las cabeceras verdes y la profundidad de las tarjetas guían la atención hacia las dos opciones.